vue项目webpack代理跨域

vue项目开发中，经常会遇到跨域问题，即以下这种情况

image.png

浏览器同源策略导致了跨域的问题，即协议，域名，端口不一致
服务器和服务器之间不存在跨域的问题，根据这个原理，可以使用webpack本地服务器访问远程服务器，解决跨域问题

首先打开webpack的配置文件webpack.config.js，找到devServer节点，添加proxy属性即可。
完成之后是这样的

dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {  //本地代理跨域
      '/api': {
        target:'http://192.168.1.36:8022/',//远程请求域名
        //secure: false, // 如果是https接口，需要配置这个参数
        changeOrigin:true,//如果是跨域访问，需要配置这个参数
        pathRewrite:{
          '^/api': '/api'
        }
      }
    },

所有url为/api开头的都会被代理成http://localhost:8082/api/...

修改完之后的提醒

一定要重启
一定要重启
一定要重启