跨域簡便解決方法

2022-02-03 10:14:46 字數 1744 閱讀 1203

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)

//允許所有的請求, 不支援cookie,方法1

"access-control-allow-origin","*");

//允許指定網域名稱的請求,支援cookie,方法2

if(osession.uricontains("

"))}

更多fiddler指令碼和跨域內容,可參考這篇文章

4. 使用nginx或charles設定**

此方法與修改access-control-allow-origin的header的原理不同,修改header是偽裝請求,只是欺騙瀏覽器,使用**,中間層進行**和回發,後端無跨域限制,是避開了跨域。

4.1 nginx反向**

首先,nginx**本地和遠端站點

**本地的node站點,訪問頁面不再從localhost開始,而是從nginx的網域名稱開始。因為localhost已經被本地node站點占用,nginx再使用就會衝突。

配置幾個要**的位址,這樣就可以把不同的位址**到不同的站點

server 

location /koa1

location /koa2

}

其次,要設定本地的hosts檔案

新增 127.0.0.1 www.aa.com aa.com

如此,訪問 aa.com,就可以完成跨域訪問

其他方式,charles**設定和nginx**設定,可以參考這篇文章

vue跨域解決方法

vue專案中,前端與後台進行資料請求或者提交的時候,如果後台沒有設定跨域,前端本地除錯 的時候就會報 no access control allow origin header is present on the requested resource.這種跨域錯誤。要想本地正常的除錯,解決的辦法有三...

跨域報錯解決方法

當你報這個錯誤的時候,就是沒有處理好跨域。跨域是什麼 簡單來說就是你要請求url的協議 網域名稱 埠有乙個和你的頁面url不同就是跨域 例如我這裡 我是http localhost 8080然後要訪問的資料 解決方法 中介軟體 跨域 res.writehead 設定允許那些源可以跨域請求,代表所有源...

js跨域及解決方法

前段時間做重構公司 的時候需要跨域訪問我們這邊其他系統的介面,由於那邊的介面都是採用webservice的方式返回json的形式提供的,正好他們那邊還提供的ajax的使用示例,就懶得在跑到後台去傳遞了,直接前台用ajax了。結果一直沒有效果,chrome除錯的時候報出這樣的提示xmlhttprequ...