在平時工作中，前端調(diào)試接口跨域等問題，其實是令人頭大的事情。尤其是當一臺服務器從后端返回的數(shù)據(jù)暫時不能調(diào)整響應頭導致的跨域問題，跟大家分享幾種跨域調(diào)試的辦法。

概念

講清楚解決問題之前，先講講問題的產(chǎn)生原因（有基礎的可以跳過這段）。

前端處于安全考慮，禁止向其他頁面擅自發(fā)送請求，否則將導致嚴重的安全問題，例如調(diào)用了另外一個網(wǎng)站的接口把錢轉(zhuǎn)走了，這個可是很危險的事情！基于此，也就經(jīng)?？吹搅四愕囊恍┱埱蟊?block 掉了。那么怎么才算跨域呢？

類型值

協(xié)議http/https

主機名juejin.im

端口號80

三者只要一個不同，就算是跨域。

跨域項目常規(guī)調(diào)試方法匯總

常規(guī)的套路網(wǎng)上滿天飛，jsonp，利用nginx代理，webpack里面代理，nodejs搞個express等等之類的，這些已經(jīng)別人已經(jīng)說夠多了，我這里分享一些我自己的簡單騷操作，我認為更加簡單粗暴效果快。

利用 chrome 啟動參數(shù)

利用 chrome 啟動參數(shù)無疑是最方便快捷的辦法，直接關閉掉跨域限制。

首先為了安全起見（嚴重建議不要一直開著它瀏覽網(wǎng)頁等日常，有安全風險?。覀冊赾hrome瀏覽器右上角，新建一個測試用戶，這時桌面會多出來一個快捷方式，對著這個快捷方式，我們屬性里面更改它的目標：

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe"--disable-web-security --user-data-dir="c:/MyChromeDevUserData"復制代碼

可以看到我后面加了兩個參數(shù)，第一個是 --disable-web-security 這里就是關閉跨域的關鍵，然后我一般會設置一個用戶目錄，存放 chrome 產(chǎn)生的數(shù)據(jù)。 然后打開這個鏈接，會發(fā)現(xiàn)，一個全新的可以跨域的瀏覽器就完成了。它還可以加載本地文件哦~ 同時，思維再發(fā)散一下~ chrome 直接當個小爬蟲工具它不香么~一把梭哈。

利用chrome開發(fā)工具

首先打開F12開發(fā)者工具，點擊到Sources>>Overrides。

這個是谷歌開發(fā)者工具自帶的一個資源代理工具，可以理解為，它能夠把內(nèi)容代理到本地文件，例如圖片，get，post請求等等。這樣就很方便了，我們在本地新建一個json文件，它都能直接讀到，代理我們的get和post請求。

模擬請求接口，如果接口攜帶參數(shù)，用%3f來替換問號當做文件名，例如https://www.baidu.com/sugrec?prod=pc_his?則文件名應該為sugrec%3fprod=pc_his?注意放在www.baidu.com?目錄下。重新發(fā)起請求，就發(fā)現(xiàn)頁面內(nèi)容被代理到了本地。

post請求也可以代理，但是要注意，例如：http://xxx.cn/xxx/?對應的代理文件可以這樣寫 xxx.cn/xxx/index.html 這樣的話，就被代理到了html文件了，因為post有時候是根路徑，所以需要稍微變通下辦法。

利用chrome插件

谷歌插件里面，給予了強大的跨域權限（而且如果你登錄，它還攜帶狀態(tài)），利用這個神奇的特性，我們可以做一個非常簡單的 demo 插件。甚至可以對請求，cookie等進行改寫操作。代理就更別說了。而谷歌插件背后運行的 background.html 就可以進行跨域了,我們利用插件的消息傳遞就可以完成平時的跨域請求。關于這里的插件方面的講解，可以移步插件大佬的文章：【干貨】Chrome插件(擴展)開發(fā)全攻略。