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再使用就会冲突。
配置几个要代理的地址,这样就可以把不同的地址代理到不同的站点

跨域解决方案cors axios 跨域解决方案proxy_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/; 
    }
}

跨域解决方案cors axios 跨域解决方案proxy_nginx

其次,要设置本地的hosts文件

添加 127.0.0.1 www.aa.com aa.com

如此,访问 aa.com,就可以完成跨域访问