引言：跨域文件天天讲时时讲，今天继续讲讲，主要是想记录一下，以免下次碰到直接翻开来看看。其实跨域的问题之前也碰到过解决过，但一般解决一次后面基本就不用去理会了。今天是由于对接一个全新的项目、项目组、项目开发人员，碰到了又重新走了一遍原路，耗时耗力，所以还是记录一下。
1、webpack项目配置开发代理
前提条件
- 需要使用本地开发插件： webpack-dev-server
- webpack-dev-server使用的是http-proxy-middleware
module.exports = {
//...
devServer: {
proxy: {
'/api': {
target: 'http://www.baidu.com/',
pathRewrite: {
'^/api' : ''
},
changeOrigin: true, // target是域名的话，需要这个参数，
secure: false, // 设置支持https协议的代理
},
'/api2': {
.....
}
}
}
};
webpack proxy 官方配置教程：devServer.proxy
配置说明
1、/api
捕获API的标志，如果API中有这个字符串，那么就开始匹配代理，比如API请求/api/users, 会被代理到请求。
2、target
www.baidu.com/api/users 。
代理的API地址，就是需要跨域的API地址。
地址可以是域名,如：www.baidu.com
也可以是IP地址：http://127.0.0.1:3000
如果是域名需要额外添加一个参数changeOrigin: true，否则会代理失败。
3、pathRewrite
路径重写，也就是说会修改最终请求的API路径。
比如访问的API路径：/api/users,
设置pathRewrite: {'^/api' : ''},后，
最终代理访问的路径：www.baidu.com/users，
这个参数的目的是给代理命名后，在访问时把命名删除掉。
4、changeOrigin
这个参数可以让target参数是域名。
5、secure
secure: false,不检查安全问题。
设置后，可以接受运行在 HTTPS 上，可以使用无效证书的后端服务器
查看更详细的资料：http-proxy-middleware
2、利用nginx做代理实现跨越
跨域是浏览器行为，不是服务器行为
一招辨别反向代理、正向代理（知道访问的目标服务器的代理属于正向代理，反之亦然） 1、首页检查需要代理的目标域名或者IP是否可访问（具体操作根据后端提供的ip或域名拼上接口链接在浏览器打开）
2、本地开启nginx
如果想通过域名代理访问：
本地hosts文件绑定域名 127.0.0.1 xxx.xxx.com 或 localhost xxx.xxx.com 设置nginx监听80端口，再设置location匹配链接
代理到前端项目示例
location / {
proxy_pass http://localhost:8001; // 前端本地起的项目服务
}
接口代理示例
location /api {
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X- Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
proxy_pass http://aaa.bbb.ccc.ddd:8080;
}
Access-Control-Allow-Origin 这个值可前端在nginx里配置，也可后端在项目里配置
