跨域简便解决方法

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

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

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，就可以完成跨域访问

 

其他方式，charles代理设置和nginx代理设置，可以参考这篇文章