第跨域?yàn)g覽器設(shè)置解決前端跨域問題目錄一、什么是跨域二、什么情況下會(huì)出現(xiàn)跨域三、uni-app項(xiàng)目解決跨域辦法四、Vue.js項(xiàng)目解決跨域辦法五、終極解決辦法，刪除瀏覽器跨域限制

一、什么是跨域

出于瀏覽器的同源策略限制。同源策略是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會(huì)受到影響。知識(shí)點(diǎn)：跨域只會(huì)出現(xiàn)在瀏覽器上，小程序和APP開發(fā)不會(huì)有跨域問題

二、什么情況下會(huì)出現(xiàn)跨域

說人話就是域名不同的時(shí)候會(huì)出現(xiàn)跨域。下面以百度域名為例，在域名的：協(xié)議、主機(jī)名、域名、端口任何一個(gè)與當(dāng)前訪問的站點(diǎn)域名不同時(shí)就會(huì)出現(xiàn)跨域

:443

出現(xiàn)跨域時(shí)，瀏覽器控制臺(tái)的報(bào)錯(cuò)如下圖所示

切記：本文章只講述前端解決跨域的辦法，并且前端解決跨域問題只在本地開發(fā)時(shí)有效，項(xiàng)目發(fā)布線上需要前端服務(wù)器配置請(qǐng)求代理比如nginx的反向代理或后端允許跨域請(qǐng)求

解決跨域的方法就是欺騙瀏覽器或刪除瀏覽器限制

三、uni-app項(xiàng)目解決跨域辦法

方法一：使用HBuilderX內(nèi)置瀏覽器，內(nèi)置瀏覽器是刪除了瀏覽器的跨域限制的。

方法二：在項(xiàng)目根目錄manifest.json文件中添加h5配置，點(diǎn)我查看uni-app文檔說明。

"h5":{

"devServer":{

"proxy":{

"^/api":{

"target":":8081",

"ws":true,

"changeOrigin":true

頁(yè)面請(qǐng)求代碼示例

uni.request({

url:'/api/1.json',//url要與proxy匹配，不能寫成/api.1.json

method:'GET',

success:(res)={

console.log(res);

四、Vue.js項(xiàng)目解決跨域辦法

在項(xiàng)目根目錄vue.config.js文件中添加如下配置

/*開發(fā)環(huán)境配置*/

devServer:{

/*代理目錄*/

proxy:{

'^/api':{

target:':8081',

ws:true,

changeOrigin:true

頁(yè)面請(qǐng)求代碼，以axios庫(kù)為例

request.get('/api/1.json',{

params

}).then(res={

console.log(res)

五、終極解決辦法，刪除瀏覽器跨域限制

如果你的項(xiàng)目不是工程化的，比如jQuery技術(shù)棧的話用這種方式最簡(jiǎn)單粗暴

以chrome瀏覽器為例

【設(shè)置步驟】

新建一個(gè)Chrome的桌面快捷方式在快捷方式上右鍵，點(diǎn)擊【屬性】，打開【屬性】面板在【屬性】面板的【目標(biāo)】中（chrome.exe后面）按一下空格，再添加以下代碼：

--args--disable-web-security

--user-data-dir=D:\MyChromeDevUserData

或者

--disable-web-security

--user-data-dir=D:\MyChromeDevUserData

設(shè)置成功以后再打開瀏覽器，會(huì)有提示：

您使用的是不受支持的命令行標(biāo)記：--disable-web-security，穩(wěn)定性和安全性會(huì)有所下降

此時(shí)，正常用戶都可以進(jìn)行跨域訪問了，比方本地的前端項(xiàng)目，直連測(cè)試或者線上環(huán)境的接口（前提是目標(biāo)環(huán)境在當(dāng)前瀏覽器登陸過