webpack配置proxy反向代理，解决跨域问题
目的：为了解决前端和后端联调数据，出现的跨域问题,通过配置反向代理，可以更好的联调数据
常见跨域场景
(1)同一域名，不同端口
http://www.qmblog.cn:8000/a.jshttp://www.qmblog.cn/b.js(2)同一域名，不同协议http://www.qmblog.cn/a.jshttps://www.qmblog.cn/b.js(3)域名和域名对应相同iphttp://www.dqmblog.cn/a.jshttp://127.0.0.1/b.js(4)不同域名http://www.demo1.com/a.jshttp://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',
}]
}
};腾讯云开发者
