前言
- 同源策略是浏览器需要遵循的标准，不满足同源策略下，浏览器访问服务器会存在跨域问题。
- node发起请求可以避免浏览器的同源策略，通过node搭建中间代理服务器，浏览器 => 代理服务器 => 服务器 这样就不存在跨域问题了~
一、安装插件 webpack-dev-server
1、安装插件：webpack-dev-server。
2、webpack-dev-server使用的是http-proxy-middleware来实现跨域代理的。
二、在vue.config.js里面配置信息
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://www.baidu.com/',//目标路径
pathRewrite: {'^/api' : ''},//重写路径
changeOrigin: true, // target是域名的话，需要这个参数，
secure: false, // 设置支持https协议的代理
},
'/api2': {
.....
}
}
}
};
三、配置参数说明
3.1 '/api'
捕获API的标志，如果API中有这个字符串，那么就开始匹配代理，
比如API请求/api/users, 会被代理到请求 http://www.baidu.com/api/users 。
3.2 target
代理的API地址，就是需要跨域的API地址。
地址可以是域名,如：http://www.baidu.com
也可以是IP地址：http://127.0.0.1:3000
如果是域名需要额外添加一个参数changeOrigin: true，否则会代理失败。
3.3 pathRewrite
路径重写，也就是说会修改最终请求的API路径。
比如访问的API路径：/api/users,
设置pathRewrite: {'^/api' : ''}后，
最终代理访问的路径：http://www.baidu.com/users，
这个参数的目的是给代理命名后，在访问时把命名删除掉。
3.4 changeOrigin
这个参数可以让target参数是域名。
3.5 secure
secure: false,不检查安全问题。
设置后，可以接受运行在 HTTPS 上，可以使用无效证书的后端服务器
四. 参考资料
深入跨域问题(4) - 利用代理解决跨域
webpack开发配置API代理解决跨域问题-devServer
补充：以上只能解决本地开发跨域问题，当项目部署到服务器上后，则可以通过nginx代理解决跨域
