Webpack 配置 proxy 代理解决跨域问题

1. 同源策略：https://www.cnblogs.com/twinkleG/p/15357210.html

2. CORS 跨域：https://www.cnblogs.com/twinkleG/p/15359409.html

3. 以上两个链接是个人对同源策略以及CORS跨域的一些浅薄理解，做项目遇到了跨域问题，

看了一些博主的理解，借鉴一下：https://juejin.cn/post/6978831126727131173【稀土掘金】，

同时也看了一些视频：https://www.bilibili.com/video/BV1e7411j7T5?p=37

　　浏览器发送请求到非同源服务器，会导致跨域问题，而服务器与服务器之间的通信是不存在跨域问题的，因此我们在本地 npm run serve 搭建的服务器，先接收到我们的请求，之后由本地服务器转发请求到目标服务器即可获取资源，再将资源从本地服务器发送给浏览器，这是 vue.config.js 中配置 devServer 解决跨域的思路。

　　proxy中，本地服务器拦截浏览器请求，由本地服务器转发给target值【目的服务器】。

module.exports = {
  devServer: {
    host: 'localhost',
    port: '8083',
    proxy: {
      '/api': {  // /api 表示拦截以/api开头的请求路径
        target: 'http:127.0.0.1:3000', // 跨域的域名
        changeOrigin: true, // 是否开启跨域
      }
    }
  }
}

　　以上配置和下面这种配置效果是一致的：pathRewrite 路径重写，将 target 中 /api 变为空值。

module.exports = {
  devServer: {
    host: 'localhost',
    port: '8083',
    proxy: {
      '/api': {
        target: 'http:127.0.0.1:3000/api',
        changeOrigin: true,
        pathRewrite: {  // 重写路径
          '^/api': ''  // 把/api变为空字符
        }
      }
    }
  }
}

　　当我们发送一个请求时，target 值会与请求URL进行拼接，这才是最终要请求的地址：

// axios请求
axios({
  method: 'get',
  url: '/api/newList'
}).then(res=>{})

　　当拦截到以 /api 开头路径时，把设置的跨域域名与路径拼接就变为了 http:127.0.0.1:3000/api/newList