vue-cli3 set up a proxy cross-domain Detailed

The old rules, first on the code

// 在根目录下自行创建vue.config.js
module.exports = { // cli3 代理是从指定的target后面开始匹配的，不是任意位置；配置pathRewrite可以做替换 devServer: { port: '8080', open: true, proxy: { '/api': { // /api 的意义在于，声明axios中url已/api开头的请求都适用于该规则， // 注意是以/api开头，即：axios.post({url: '/api/xxx/xxx'}) target: '服务器真实地址', // 此处target的意义在于：造成跨域是因为访 // 问的host与我们的请求头里的origin不一致，所以我们要设置成一致，这个具体请看下文 changeOrigin: true, pathRewrite: {'^/api': 'https://我是服务器/api'} // 此处是大部分文章都不会明说的的地方， // 既然我们设置了代理，则所有请求url都已写成/api/xxx/xxx，那请求如何知道我们到底请求的是哪个服务器的数据呢 // 因此这里的意义在于， 以 /api开头的url请求，代理都会知道实际上应该请求那里， // ‘我是服务器/api’，后面的/api根据实际请求地址决定，即我的请求url：/api/test/test，被代理后请求的则是 // https://我是服务器/api/test/test } } } } 

Acting has been a successful request

 

Micro-letter picture _20191211182354.png

As shown, you can see the host Request URL and request header origin has been consistent, which is why the configuration agent can solve the problem of cross-domain,
resulting in cross-domain request url is because the host does not match our origin, that is, often said, non-homologous, by configuring the proxy, my request became from
192.168.1.109:8080 (this is my local ip, explain) requesting data from 192.168.1.109:8080, it is to solve the non-homologous The problem,

People talk mode

People say: We request the proxy server instead of the server's data back to my native, my native request broker for me to get my data to the machine, so I no longer need to consider the cross-domain

that's it

Author: _ as shown in
the link: https: //www.jianshu.com/p/f002ae1c046f
Source: Jane books
are copyrighted by the author. Commercial reprint please contact the author authorized, non-commercial reprint please indicate the source.

 

= module.exports { 
  devserver: { 
    Proxy: {
       '/ API' : { 
        target: 'HTTP: // localhost: 8001', // destination address --api path 
        WS: to true , // // whether to enable WebSockets 
        changeOrigin: to true , // enable proxy: creates a virtual server locally, and then sends the requested data, the data and at the same time receiving a request, so that the server and server data interaction there would be no cross-domain issues 
        pathRewrite: { ' ^ / API ':' HTTP: // localhost: 8080 / API '} // here rewriting path --vue port 
      } 
    } 
  } 
}