跨域瀏覽器設置解決前端跨域問題

Posted on by

一、什麼是跨域

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

二、什麼情況下會出現跨域

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

https://www.baidu.com:443

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

切記：本文章隻講述 前端解決跨域的辦法，並且前端解決跨域問題隻在本地開發時有效，項目發佈線上需要前端服務器配置請求代理比如 nginx的反向代理 或 後端允許跨域請求

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

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

方法一：使用 HBuilderX 內置瀏覽器，內置瀏覽器是刪除瞭瀏覽器的跨域限制的。

方法二：在項目根目錄 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 文件中添加如下配置

/* 開發環境配置 */
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 技術棧的話用這種方式最簡單粗暴

以 chrome 瀏覽器為例

【設置步驟】

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

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

或者

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

設置成功以後再打開瀏覽器，會有提示：

“您使用的是不受支持的‘命令行’標記： –disable-web-security，穩定性和安全性會有所下降”

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

以上就是跨域瀏覽器設置解決前端跨域問題的詳細內容，更多關於跨域瀏覽器設置的資料請關註WalkonNet其它相關文章！

推薦閱讀：