webpack配置proxy反向代理，解决跨域问题

目的：为了解决前端和后端联调数据，出现的跨域问题,通过配置反向代理，可以更好的联调数据

webpack官网

常见跨域场景

(1)同一域名，不同端口
http://www.demo.com:8000/a.js
http://www.demo.com/b.js
(2)同一域名，不同协议
http://www.demo.com/a.js
https://www.demo.com/b.js
(3)域名和域名对应相同ip
http://www.demo.com/a.js
http://127.0.0.1/b.js
(4)不同域名
http://www.demo1.com/a.js
http://www.demo2.com/b.js

前端常用解决方案

(1)通过jsonp跨域：只能发get请求，数据量不能超过4K
(2)跨域资源共享（CORS）:需服务端设置Access-Control-Allow-Origin即可，前端无须设置，若要带cookie请求：前后端都需要设
(3)反向代理:在浏览器中创建了代理服务器，缺点渲染效率降低

反向代理

配置反向代理

//vue-cli3.0 里面的 vue.config.js做配置
const url = 'http://192.168.0.111:9999' //服务器端接口地址
module.exports = {
  //...
  devServer: {
    proxy: {
        '/api': {                //这里最好有一个 /
            target: url,         // 服务器端接口地址
            ws: true,            //如果要代理 websockets，配置这个参数
            secure: false,       // 如果是https接口，需要配置这个参数
            changeOrigin: true,  //是否跨域
            pathRewrite:{'^/api':''}
        }
    }
  }
};

此时访问的接口地址在本地被解析为localhost:8080/api/***

访问的真实地址是http://192.168.0.111:9999***

正向代理隐藏真实客户端地址，反向代理则隐藏真实服务端地址

详情

在http://192.168.0.111:9999上有后端服务的话，你可以这样启用代理：

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': 'http://192.168.0.111:9999'
    }
  }
};

请求到/api/users现在会被代理到请求http://192.168.0.111:9999/api/users。

如果你不想始终传递 /api ，则需要重写路径：

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://192.168.0.111:9999',
        pathRewrite: {'^/api' : ''}
      }
    }
  }
};

默认情况下，不接受运行在HTTPS上，且使用了无效证书的后端服务器。如果你想要接受，修改配置如下：

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'https://other-server.example.com',
        secure: false
      }
    }
  }
};

如果你想要代理多个路径特定到同一个 target 下，你可以使用由一个或多个「具有 context 属性的对象」构成的数组：

module.exports = {
  //...
  devServer: {
    proxy: [{
      context: ['/auth', '/api'],
      target: 'http://192.168.0.111:9999',
    }]
  }
};