跨域簡便解決方法

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代理設置，可以參考這篇文章