一、跨域報錯

????????在我們實際開發(fā)過程中，都有遇到過跨域的問題，跨域報錯如下：

二、為什么會報跨域？

????????跨域的本質(zhì)是瀏覽器基于同源策略的一種安全手段，主要是考慮到用戶的信息安全。何為同源策略呢？同源策略是一種約定，它是瀏覽器最核心也最基本的安全功能。所謂同源（即指在同一個域）具有以下三個相同點：協(xié)議相同、域名相同、端口相同。

????????反之非同源請求，也就是協(xié)議、端口、主機(jī)其中一項不相同的時候，這時候就會產(chǎn)生跨域。跨域是瀏覽器的限制，攔截的是響應(yīng)而非請求。我們用抓包工具抓取接口數(shù)據(jù)，可以看到接口已經(jīng)把數(shù)據(jù)返回來了，只是由于瀏覽器的限制我們獲取不到數(shù)據(jù)。另外，并不是所有的跨域都會有問題，只有ajax和fetch產(chǎn)生的跨域才會被瀏覽器限制。

三、如何解決跨域？

（1）JSONP

????????JSONP是一種比較古老的解決方案，這種方案沒有兼容性問題，基本都可以使用，但是它所解決的問題比較有限，且對服務(wù)端接口有一定的要求，只支持get請求，不支持post，請求回來的東西當(dāng)做js來執(zhí)行。

????????原理：JSONP本質(zhì)上使用的是script標(biāo)簽的src屬性，該標(biāo)簽有跨域請求資源的能力，且請求的資源類型是js腳本。也就是說，我們需要在服務(wù)器給返回一段js腳本，并且把要返回給前端的數(shù)據(jù)加入到這段js腳本中。在瀏覽器端執(zhí)行這段腳本，從而達(dá)到獲取數(shù)據(jù)的目的。

（2）CORS

????????CORS是 W3C 標(biāo)準(zhǔn)，屬于跨源 ajax請求的根本解決方法。CORS 規(guī)范中，清楚定義了跨域存取控制的運作方式。首先，服務(wù)端需要在響應(yīng)頭中加上如Access-Control-Allow-Origin、Access-Control-Request-Method、Access-Control-Request-Headers 等設(shè)定，來限制服務(wù)器所能接受的來源、請求的方法、可攜帶的頭等等。

????????當(dāng)瀏覽器發(fā)送資源請求時，如果是簡單請求便會直接送出請求；若不符合前述條件，則會通過預(yù)檢請求，確認(rèn)是否可以通過服務(wù)器的限制，然后才會發(fā)送正式的請求。

????????簡單說，該方法只需要直接讓后端設(shè)置響應(yīng)頭，允許資源共享就ok了，前端不需要做額外修改。

（3）Proxy

????????瀏覽器是禁止跨域的，但是服務(wù)端不禁止。拿Vue項目說，在本地運行npm run dev等命令時實際上是用node運行了一個服務(wù)器，因此proxyTable實際上是將請求發(fā)給自己的服務(wù)器，再由服務(wù)器轉(zhuǎn)發(fā)給后臺服務(wù)器，做了一層代理，因此不會出現(xiàn)跨域問題。

????????Vue-cli腳手架, 就啟動了一個webpack開發(fā)服務(wù)器, 它就能做代理轉(zhuǎn)發(fā)，我們只需要修改webpack開發(fā)服務(wù)器的配置即可。

Vue.config.js:

????????總結(jié)一下就是，在前端服務(wù)和后端接口服務(wù)之間 架設(shè)一個中間代理服務(wù)，它的地址保持和前端服務(wù)一致，那么，代理服務(wù)和前端服務(wù)之間由于協(xié)議、域名、端口三者統(tǒng)一不存在跨域問題，可以直接發(fā)送請求；代理服務(wù)和后端服務(wù)之間由于并不經(jīng)過瀏覽器，沒有同源策略的限制，也可以直接發(fā)送請求。這樣，我們就可以通過中間這臺服務(wù)器做接口轉(zhuǎn)發(fā)，在開發(fā)環(huán)境下解決跨域問題，看起來好像挺復(fù)雜，其實vue-cli已經(jīng)為我們內(nèi)置了該技術(shù)，我們只需要按照要求配置一下即可。

當(dāng)然，解決跨域的方法不止這些，比如nginx反向代理等方式也可以解決跨域問題。大家可以結(jié)合實際采取最簡潔方便的方式。文章來源地址http://www.zghlxwxcb.cn/news/detail-484908.html

到了這里，關(guān)于解決前端跨域的幾種方法的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！