解決跨域的幾種方法

瀏覽器從一個域名的網頁去請求另一個域名的資源時，域名、埠、協議任一不同，都是跨域

兩個誤區

對於跨域，前端開發人員應該都遇到過，不過很多人對於跨域都有一定的誤解

跨域是後台限定的？

前台發的請求都是跨域？

跨域是瀏覽器的行為，但是後台可以輔助解決跨域。

跨域其實是針對ajax請求的，對於標籤、form表單等並沒有這樣的限制(所以會有以及)。

解決方案

在開發的時候，總是會用到不同環境下的數據進行開發、測試，這個時候難免會用到不同域下的介面或者數據，那麼該怎麼辦呢？方案一: JSONP是最早使用的方法了，前面也提到，瀏覽器對於標籤、表單等並沒有跨域的限制，也就是說，其實可以通過去獲取後台的數據。不過這裡注意的是，獲取的並不是純數據，而是一個方法的調用，因為返回的應當是一個語句，這個語句在載入完成後就會被執行:

src="/your/url?name=func"

>

functionfunc(data) {

// 你的邏輯

}

這裡可以看到，載入標籤的時候還會帶一個參數，這個參數其實就是要運行的函數(全局函數)的名稱。

方案二: 瀏覽器直接關閉

這個就是只有開發人員會用到的了，因為跨域是瀏覽器的行為，所以，我們可以把這個行為給關了mac環境

//chrome 瀏覽器

open-a"Google Chrome"--args--disable-web-security--user-data-dir

//safari 瀏覽器

open-a"/Applications/Safari.app"--args--disable-web-security--user-data-dirwindows這裡的chrome.exe 地址根據自己安裝路徑來, 測試過 chrome45,48,53版本。 45版本 只需要 --disable-web-security 48,53版本需要 額外添加 --user-data-dir

"C:UsersUserNameAppDataLocalGoogleChromeApplicationchrome.exe" --disable-web-security --user-data-dir

方案三: 後台添加headers(CORS)

前面提到，後台可以輔助解決跨域的行為，解決方法一是前面提到的(JSONP是需要後台輔助的)，另外一個就是後台添加一些配置，這種方式又被稱作CORS()。就拿Nodejs來說，後台可以這樣配置:

var express=require("express");

var app=express();

//設置跨域訪問

app.all("*",function(req, res, next) {

res.header("Access-Control-Allow-Origin","*");

res.header("Access-Control-Allow-Headers","X-Requested-With");

res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");

res.header("X-Powered-By"," 3.2.1")

res.header("Content-Type","application/json;charset=utf-8");

next();

});

方案四:使用代理

我們還可以使用代理，將需要跨域的URL在伺服器後台進行代理，這其實就是繞過了瀏覽器的跨域行為。常用的代理軟體有charles/cow等。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！