Problèmes de traitement inter-domaines Vue (tutoriel détaillé)

Cet article vous donne une introduction détaillée à la façon dont Vue gère les problèmes inter-domaines et une introduction aux points de connaissances associés. Les amis qui sont intéressés par cela peuvent en tirer des leçons.

Définir une demande de proxy express

Dans un projet basé sur vue-cli, définissez le proxy dans la configuration de l'environnement de développement (config/dev.env.js), vous can Toutes les requêtes commençant par /apidomain sont redirigées vers l'interface cible via le serveur npm run dev démarré par express

Documentation officielle : https://vuejs-templates.github.io/webpack/proxy. html

proxyTable: {
  '/apidomain':{
  target:'http://localhost:prot',//或ip或域名。
  changeOrigin:true,
  pathRewrite: {
   '^/apidomain': ''
  }
  }
 },

Si vous souhaitez accéder à h5 sur le LAN via IP, ajoutez le paramètre host lors du démarrage du serveur de développement

C'est-à-dire la configuration de la commande dev de package.json est le suivant

"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0",

Désactivez la politique de sécurité de Chrome pour obtenir des résultats inter-domaines

Créez un nouveau fichier bat dans Windows et collez la commande suivante pour l'ouvrir dans ce mode

cd "C:\Program Files (x86)\Google\Chrome\Application" 
chrome.exe --disable-web-security --user-data-dir=c:/CorsUserData

Paramètres inter-domaines CORS côté serveur asp .net core

Documentation officielle : https://docs.microsoft.com/zh- cn/aspnet/core/security/cors

En pratique Lors de la configuration, 预检(OPTIONS)请求 a été généré en raison de l'ajout de paramètres d'en-tête côté h5. Après avoir lu l'article ci-dessus, j'ai modifié les paramètres généraux dans la requête. paramètres

1. Ajouter le service cors

public void ConfigureServices(IServiceCollection services)
{
 //若只有部分接口则定义一个或多个命名的 CORS 策略，并在运行时按名称然后选择的策略,通过特性标记去设置跨域 详情见文档
 services.AddCors();
}

2. Activer le middleware

//读取配置文件中设置的允许跨域的域名 CorsOrigins为一个数组 设置["*"]则会允许所有
var origins = Configuration.GetSection("CorsOrigins").GetChildren().Select(s => s.Value).ToArray();
app.UseCors(e =>
{
 e.WithOrigins(origins).AllowAnyHeader().AllowAnyMethod().AllowCredentials();
});

//Startup文件中Configuration对象的获取
public IConfiguration Configuration { get; }
public Startup()
{
 var builder = new ConfigurationBuilder()//...AddJsonFile($"appsettings.json");
 Configuration = builder.Build();
}

Le ci-dessus est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Nouvelles fonctionnalités de la version webpack 4.0.0-beta.0 (tutoriel détaillé)

Utilisation de SpringMVC pour résoudre Vue cross-connection Demande de domaine

Le cycle de vie des composants Vue et Route (tutoriel détaillé)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!