vue解決跨域問(wèn)題的幾種常用方法(CORS)
在Vue中解決跨域問(wèn)題有多種方法。以下是幾種常見(jiàn)的方法:
1. 代理服務(wù)器:在開(kāi)發(fā)環(huán)境中,可以配置一個(gè)代理服務(wù)器來(lái)轉(zhuǎn)發(fā) API 請(qǐng)求,繞過(guò)瀏覽器的同源策略??梢允褂?http-proxy-middleware
等中間件來(lái)實(shí)現(xiàn)代理配置。在 vue.config.js
文件中進(jìn)行配置,示例如下:
module.exports = { devServer: { proxy: { '/api': { target: 'http://api.example.com', changeOrigin: true, pathRewrite: { '^/api': '' } } } } }
上述配置將所有以 /api
開(kāi)頭的請(qǐng)求轉(zhuǎn)發(fā)到 http://api.example.com
。
在上述的例子中,其實(shí) pathRewrite 也可以不寫(xiě),例如:
devServer: { open: true, port: 8080, // headers: {}, host: 'test.meditrusthealth.com', disableHostCheck: true, https: true, proxy: { "/gwkf": { // "/gwky" 是后端的服務(wù)名,地址后端以它為開(kāi)頭的 target: "https://baidu.com/", //你需要訪(fǎng)問(wèn)的網(wǎng)址 changeOrigin: true, }, // 像這種可以配置多個(gè),后端會(huì)有多個(gè)服務(wù)名的情況 // 首先我們需要獲取到后端的服務(wù)名,就是需要代理的服務(wù)名,這個(gè)我們可以通過(guò)swagger,來(lái)找到 // 第二點(diǎn),我們需要找到請(qǐng)求路徑,如果是測(cè)試環(huán)境(開(kāi)發(fā)環(huán)境),就用測(cè)試環(huán)境、生產(chǎn)環(huán)境就用生產(chǎn)環(huán)境的路徑。 // 然后就在target里面,添加上域名就可以了 // changeOrigin 要為true,意思就是:當(dāng)進(jìn)行代理時(shí),Host 的源默認(rèn)會(huì)保留 // (即Host是瀏覽器發(fā)過(guò)來(lái)的host), // 如果將changeOrigin設(shè)置為true,則host會(huì)變成target的值;在vue-cli3中, // 默認(rèn)changeOrigin的值是true,意味著host設(shè)置成target,這與cue-cli2不一致, // vue-cli2這個(gè)默認(rèn)值是false。 "fast-admin": { target: "https://test-analysis.com/", changeOrigin: true, }, "fast-service": { target: "https://test-analysis.com/", changeOrigin: true, }, "mth-core-service": { target: "https://test-masterdata.com/", changeOrigin: true, }, "mth-core-admin": { target: "https://test-masterdata.com/", changeOrigin: true, }, "mth-capital-service": { target: "https://test-analysis.com/", changeOrigin: true, }, '/fast-provide': { target: 'https://test-mobile.com', secure: false, changOrigin: true, logLevel: 'debug' }, } },
2. JSONP:如果后端支持 JSONP 跨域請(qǐng)求,可以使用 Vue 中的 JSONP 庫(kù)(如 vue-jsonp
)來(lái)發(fā)送跨域請(qǐng)求。
3. CORS:后端服務(wù)在響應(yīng)中設(shè)置合適的 CORS 頭部信息,允許特定的源(包括端口和協(xié)議)訪(fǎng)問(wèn)該接口。在 Vue 中直接發(fā)起跨域請(qǐng)求,由后端處理跨域問(wèn)題。
4. WebSocket:如果需要在 Vue 中與支持 WebSocket 的服務(wù)器進(jìn)行跨域通信,可以使用 WebSocket API 進(jìn)行連接和通信。WebSocket 不受同源策略的限制。
需要注意的是,以上方法適用于開(kāi)發(fā)環(huán)境下解決跨域問(wèn)題。在生產(chǎn)環(huán)境中,應(yīng)該由后端配置合適的跨域策略,以確保安全性。
請(qǐng)根據(jù)你的具體情況選擇適合的解決方案。如果需要更詳細(xì)的說(shuō)明或代碼示例,請(qǐng)?zhí)峁└唧w的問(wèn)題或場(chǎng)景。
延伸問(wèn)題,生成環(huán)境中前端怎么解決跨域呢?
在生產(chǎn)環(huán)境中,前端解決跨域問(wèn)題的方法有限,因?yàn)闉g覽器的同源策略限制了跨域訪(fǎng)問(wèn)。以下是一些可行的方法:
- 通過(guò)后端代理:在生產(chǎn)環(huán)境中,可以通過(guò)后端服務(wù)器進(jìn)行跨域請(qǐng)求。前端將請(qǐng)求發(fā)送到同域下的后端接口,然后后端服務(wù)器再代理到目標(biāo)接口。這樣前端請(qǐng)求就遵循同源策略,不會(huì)產(chǎn)生跨域問(wèn)題。
- CORS(跨域資源共享):如果你有權(quán)限控制后端接口,可以在后端設(shè)置 CORS 頭部信息,允許特定的源(包括端口和協(xié)議)訪(fǎng)問(wèn)該接口。通過(guò)在響應(yīng)中設(shè)置合適的 CORS 頭部,瀏覽器將允許前端跨域訪(fǎng)問(wèn)。
- JSONP(僅限于 GET 請(qǐng)求):如果后端支持 JSONP,可以使用 JSONP 來(lái)進(jìn)行跨域請(qǐng)求。JSONP 利用了
<script>
標(biāo)簽不受同源策略限制的特性,在前端動(dòng)態(tài)創(chuàng)建<script>
標(biāo)簽來(lái)請(qǐng)求跨域接口。
需要注意的是,在生產(chǎn)環(huán)境中,由于安全性和跨域限制的考慮,應(yīng)該限制跨域請(qǐng)求的源和目標(biāo),避免不必要的安全風(fēng)險(xiǎn)。請(qǐng)與后端開(kāi)發(fā)人員合作,并根據(jù)具體需求和安全策略選擇合適的解決方案。
到此這篇關(guān)于vue解決跨域問(wèn)題的幾種常用方法(CORS)的文章就介紹到這了,更多相關(guān)vue解決跨域內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vue請(qǐng)求后端數(shù)據(jù)和跨域問(wèn)題解決
- vue項(xiàng)目配置代理如何解決跨域問(wèn)題
- vue跨域問(wèn)題:Access?to?XMLHttpRequest?at‘httplocalhost解決
- vue使用反向代理解決跨域問(wèn)題方案
- 解決Vue前后端跨域問(wèn)題的方式匯總
- vue3解決跨域問(wèn)題詳細(xì)代碼親測(cè)有效
- Vue項(xiàng)目中該如何解決跨域問(wèn)題
- vuecli3打包后出現(xiàn)跨域問(wèn)題,前端配置攔截器無(wú)效的解決
- Vue3設(shè)置Proxy代理解決跨域問(wèn)題
- VUE跨域問(wèn)題Access to XMLHttpRequest at
- 前端vue打包項(xiàng)目,如何解決跨域問(wèn)題
- Vue解決跨域問(wèn)題常見(jiàn)方法詳解
相關(guān)文章
Vue實(shí)現(xiàn)刷新當(dāng)前頁(yè)面的三種方式總結(jié)
項(xiàng)目當(dāng)中如果做新增/修改/刪除等等操作通常情況下都需要刷新數(shù)據(jù)或者刷新當(dāng)前頁(yè)面。本文為大家整理了三種不同的實(shí)現(xiàn)方法,需要的可以參考一下2023-01-01Vue3全局組件注冊(cè)的實(shí)現(xiàn)代碼
在這篇文章中,我們將學(xué)習(xí)一下 Vue3 的全局組件注冊(cè)是如何實(shí)現(xiàn)的,文中通過(guò)代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-12-12基于Vue+Webpack拆分路由文件實(shí)現(xiàn)管理
這篇文章主要介紹了基于Vue+Webpack拆分路由文件實(shí)現(xiàn)管理,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11vue中點(diǎn)擊按鈕下載文件的實(shí)現(xiàn)方式
這篇文章主要介紹了vue中點(diǎn)擊按鈕下載文件的實(shí)現(xiàn)方式,具有很的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10vue/cli安裝報(bào)錯(cuò)及解決問(wèn)題的方法圖文詳解
這篇文章主要給大家介紹了關(guān)于vue/cli安裝報(bào)錯(cuò)及解決問(wèn)題的方法,如果在安裝@vue/cli時(shí)遇到錯(cuò)誤,大家可以嘗試以下步驟解決,需要的朋友可以參考下2023-07-07vue?動(dòng)態(tài)添加el-input的實(shí)現(xiàn)邏輯
這篇文章主要介紹了vue?動(dòng)態(tài)添加el-input的實(shí)現(xiàn)代碼,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-06-06vue監(jiān)視器@Watch創(chuàng)建執(zhí)行immediate方式
這篇文章主要介紹了vue監(jiān)視器@Watch創(chuàng)建執(zhí)行immediate方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08