跨域简便解决方法

jsonp和CORS等解决方案都依赖于后端协助，前端要独立解决跨域，可以使用以下方法。

1. webpack-dev-server添加代理

在开发模式使用webpack-dev-server的情况下，可以在devServer的配置中添加proxy，可以直接进行转发，解决跨域

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;
    }
}

更多fiddler脚本和跨域内容，可参考这篇文章

4. 使用nginx或charles设置代理

此方法与修改Access-Control-Allow-Origin的header的原理不同，修改header是伪装请求，只是欺骗浏览器，使用代理，中间层进行转发和回发，后端无跨域限制，是避开了跨域。

charles代理设置和nginx代理设置，参考这篇文章

跨域简便解决方法

猜你喜欢