一、什么是跨域

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

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

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

https://www.baidu.com:443

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

切記：本文章只講述 前端解決跨域的辦法，并且前端解決跨域問(wèn)題只在本地開(kāi)發(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 文檔說(shuō)明。

"h5" : {
    "devServer":{
        "proxy":{
            "^/api":{
                "target":"http://127.0.0.1:8081",
                "ws": true,
                "changeOrigin": true
            }
        }
    }
}

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

uni.request({
	url:'/api/1.json',    // url 要與 proxy 匹配，不能寫(xiě)成 xx.com/api.1.json
	method:'GET',
	success: (res) => {
		console.log(res);
	}
})

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

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

/* 開(kāi)發(fā)環(huán)境配置 */
devServer:{
    /* 代理目錄 */
    proxy:{
        '^/api':{
            target:'http://127.0.0.1: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)擊【屬性】，打開(kāi)【屬性】面板 在【屬性】面板的【目標(biāo)】中（chrome.exe 后面）按一下空格，再添加以下代碼：

--args --disable-web-security 
--user-data-dir=D:\MyChromeDevUserData

或者

--disable-web-security 
--user-data-dir=D:\MyChromeDevUserData

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

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

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

以上就是跨域?yàn)g覽器設(shè)置解決前端跨域問(wèn)題的詳細(xì)內(nèi)容，更多關(guān)于跨域?yàn)g覽器設(shè)置的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論