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

這篇文章主要介紹“跨域瀏覽器怎么設置解決前端跨域問題”，在日常操作中，相信很多人在跨域瀏覽器怎么設置解決前端跨域問題問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”跨域瀏覽器怎么設置解決前端跨域問題”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

一、什么是跨域

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

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

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

https://www.baidu.com:443

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

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

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

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

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

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

"h6" : {
    "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等信息）

到此，關于“跨域瀏覽器怎么設置解決前端跨域問題”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！