Home >Web Front-end >JS Tutorial >Vue cross-domain processing issues (detailed tutorial)

Vue cross-domain processing issues (detailed tutorial)

亚连
亚连Original
2018-06-07 14:12:492532browse

This article gives you a detailed introduction to the way Vue handles cross-domain problems and an introduction to related knowledge points. Friends who are interested in this can learn from it.

Set express proxy request

In a project based on vue-cli, configure the development environment (config/dev.env.js) Setting up a proxy in can redirect all requests starting with /apidomain to the target interface through the express server started by

npm run dev

Official document: https://vuejs-templates.github.io/webpack/proxy.html

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

To access h5 on the LAN through IP, add the host parameter when starting the development server That is

The dev command configuration of package.json is as follows

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

Turn off the chrome security policy to achieve cross-domain

Create a new bat file in windows and paste it The following command can open the CORS cross-domain settings of the asp.net core server in this mode

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

Official document: https://docs.microsoft.com/ zh-cn/aspnet/core/security/cors

In the actual setting, adding header parameters on the h5 side generates a preflight (OPTIONS) request. After reading the above article, The general parameters have been modified into the query parameters

1. Add cors service

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

2. Enable 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();
}

above I compiled it for everyone. I hope it will be helpful to everyone in the future.

Related articles:

New features of webpack 4.0.0-beta.0 version (detailed tutorial)

Use SpringMVC to solve vue cross-connection Domain request

The life cycle of Vue components and Route (detailed tutorial)

The above is the detailed content of Vue cross-domain processing issues (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn