一、什么是跨域

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

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

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

https://www.baidu.com:443

出現(xiàn)跨域時，瀏覽器控制臺的報錯如下圖所示

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

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

三、uni-app 項目 解決跨域辦法

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

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

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

頁面請求代碼示例

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

四、Vue.js 項目 解決跨域辦法

在項目根目錄 vue.config.js 文件中添加如下配置

/* 開發(fā)環(huán)境配置 */
devServer:{
    /* 代理目錄 */
    proxy:{
        '^/api':{
            target:'http://127.0.0.1:8081',
            ws: true,
            changeOrigin: true
        }
    }
}

頁面請求代碼，以 axios 庫為例

request.get('/api/1.json',{
    params
}).then(res=>{
    console.log(res)
})

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

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

以 chrome 瀏覽器為例

【設(shè)置步驟】

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

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

或者

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

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

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

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

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

最新評論