jsonp和CORS等解决方案都依赖于后端协助,前端要独立解决跨域,可以使用以下方法。
1. webpack-dev-server添加代理
在开发模式使用webpack-dev-server的情况下,可以在devServer的配置中添加proxy,可以直接进行转发,解决跨域,
具体可以参考详解Webpack-dev-server的proxy用法,以及http-proxy-middleware的用法
2. chrome浏览器插件
例如:Allow-Control-Allow-Origin: * 这个插件或者Allow CORS: Access-Control-Allow-Origin 0.1.0这个插件,
可以在浏览器返回请求添加Allow-Control-Allow-Origin相关的header,从而欺骗浏览器为允许跨域。
返回的内容,在js中可以访问,但是在chrome中的Network看不到具体的XHR的内容。
还有,XSwitch这个插件,参考
3. 使用fiddler或charles等拦截软件
fiddler可以使用fiddler script的方式来修改请求的详细参数,例如返回头中的Allow-Control-Allow-Origin,fiddler script的详细,如果是https请求,需要开启fiddler对https请求的拦截。
使用此方法,在浏览器的Network中可以看到XHR请求的信息。
具体步骤:
1. 从工具栏菜单的 Rules->Customize Rules 进入Customize Rules.js
2. 在Customize Rules.js的OnBeforeResponse中添加
static function OnBeforeResponse(oSession: Session) {
if (m_Hide304s && oSession.responseCode == 304) {
oSession["ui-hide"] = "true";
}
//允许所有的请求, 不支持cookie,方法1
//oSession.oResponse.headers.Add("Access-Control-Allow-Origin","*");
//允许指定域名的请求,支持cookie,方法2
if(oSession.uriContains("https://www.baidu.com")){
oSession.oResponse["Access-Control-Allow-Origin"] = "允许的域名:端口";
oSession.oResponse["Access-Control-Allow-Credentials"] = true;
}
}
4. 使用nginx或charles设置代理
此方法与修改Access-Control-Allow-Origin的header的原理不同,修改header是伪装请求,只是欺骗浏览器,使用代理,中间层进行转发和回发,后端无跨域限制,是避开了跨域。
4.1 nginx反向代理
首先,nginx代理本地和远程站点
代理本地的node站点,访问页面不再从localhost开始,而是从nginx的域名开始。因为localhost已经被本地node站点占用,nginx再使用就会冲突。
配置几个要代理的地址,这样就可以把不同的地址代理到不同的站点
server {
listen 80;
server_name www.aa.com aa.com;
access_log logs/test.access.log;
location / {
proxy_pass http://localhost/;
}
location /koa1 {
proxy_pass http://localhost:9001/;
}
location /koa2 {
proxy_pass http://www.other.com/;
}
}
其次,要设置本地的hosts文件
添加 127.0.0.1 www.aa.com aa.com
如此,访问 aa.com,就可以完成跨域访问