vue3解決跨域問(wèn)題詳細(xì)代碼親測(cè)有效
vue3解決跨域問(wèn)題詳細(xì)代碼親測(cè)有效
1.在vue.config.js中 放入以下代碼:
module.exports = { devServer: { proxy: { '/api': { target: 'http://api.tubecoin.org', //這里填入你要請(qǐng)求的接口的前綴 ws: true, //代理websocked changeOrigin: true, //虛擬的站點(diǎn)需要更換origin secure: true, //是否https接口,我用的http但是我變成false他打包后會(huì)報(bào)錯(cuò),所以先true pathRewrite: { '^/api': '' //重寫路徑 } } } } }
2. 需要寫接口的頁(yè)面引入:
import Axios from "axios"; Axios.defaults.baseURL = "/api";
3.頁(yè)面中的方法:
Axios({ method: "post", //接口方法 url: "/register/register", //接口 params: { //需要傳的參數(shù) username: obj.name, phone: obj.phone, sms_code: obj.code, }, }).then((res) => { console.log(res, "55555"); ElMessage(resp.data.message); //這個(gè)是引入的element plus中的提示框 });
關(guān)于解決vue3的跨域問(wèn)題
項(xiàng)目場(chǎng)景:
提示:這里簡(jiǎn)述項(xiàng)目相關(guān)背景:
當(dāng)我們使用vue3搭建前后端分離項(xiàng)目時(shí),往往會(huì)出現(xiàn)跨域問(wèn)題。前端往往會(huì)提示:
原因分析:
例如,我這里,前端的項(xiàng)目的請(qǐng)求地址是http://localhost:8085/,訪問(wèn)后端的接口為http://localhost:8081/ResourcesCenter/BaseMapStyle/selectByPage,由于端口的不一致,所以出現(xiàn)了跨域問(wèn)題。
解決方案:
第一步:找到vue.config.js文件,添加如下代碼:
module.exports = { devServer: { open: true, host: 'localhost', port: 8085, //這里的ip和端口是前端項(xiàng)目的;下面為需要跨域訪問(wèn)后端項(xiàng)目 proxy: { '/ResourcesCenter': { target: 'http://localhost:8081/ResourcesCenter/',//這里填入你要請(qǐng)求的接口的前綴 ws:true,//代理websocked changeOrigin:true,//虛擬的站點(diǎn)需要更管origin secure: true, //是否https接口 pathRewrite:{ '^/ResourcesCenter':''//重寫路徑 }, headers: { referer: 'http://localhost:8081/ResourcesCenter/', //這里后端做了拒絕策略限制,請(qǐng)求頭必須攜帶referer,否則無(wú)法訪問(wèn)后臺(tái) } } } } }
第二步,就是如何調(diào)用了
selectByPage(pageSize, pageNum, keyword) { return axios.get('/ResourcesCenter/BaseMapStyle/selectByPage?almanacName='+keyword+'&pageSize='+pageSize+'&pageNum='+pageNum, // { // params:{ // almanacName:keyword, // pageSize:pageSize, // pageNum:pageNum // } // }, /*' {headers: {\'Content-Type\': \'application/json;charset=UTF-8\'}}'*/) }
本人親試,已成功解決!
到此這篇關(guān)于vue3解決跨域問(wèn)題詳細(xì)代碼親測(cè)有效的文章就介紹到這了,更多相關(guān)vue3解決跨域內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vue解決跨域問(wèn)題的幾種常用方法(CORS)
- 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)題的方式匯總
- 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)文章
Vue3圖片上傳報(bào)錯(cuò):Required?part?‘file‘?is?not?present.的原因及解決方法
這篇文章主要介紹了Vue3圖片上傳報(bào)錯(cuò):Required?part?‘file‘?is?not?present.的原因及解決方法,文中通過(guò)代碼示例講解的非常詳細(xì),對(duì)大家解決問(wèn)題有一定的幫助,需要的朋友可以參考下2024-09-09Vue路由history模式解決404問(wèn)題的幾種方法
這篇文章主要介紹了Vue路由history模式解決404問(wèn)題的幾種方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09關(guān)于vue-socket.io使用及版本原因消息無(wú)法監(jiān)聽(tīng)bug
這篇文章主要介紹了關(guān)于vue-socket.io使用及版本原因消息無(wú)法監(jiān)聽(tīng)bug,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10vue.js中Vue-router 2.0基礎(chǔ)實(shí)踐教程
這篇文章主要給大家介紹了關(guān)于vue.js中Vue-router 2.0基礎(chǔ)實(shí)踐的相關(guān)資料,其中包括vue-router 2.0的基礎(chǔ)用法、動(dòng)態(tài)路由匹配、嵌套路由、編程式路由、命名路由以及命名視圖等相關(guān)知識(shí),需要的朋友可以參考借鑒,下面來(lái)一起看看吧。2017-05-05vue使用webSocket更新實(shí)時(shí)天氣的方法
本文將結(jié)合實(shí)例代碼,介紹vue使用webSocket更新實(shí)時(shí)天氣的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-06-06快速搭建vue2.0+boostrap項(xiàng)目的方法
這篇文章主要介紹了快速搭建vue2.0+boostrap項(xiàng)目的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04Vue局部組件數(shù)據(jù)共享Vue.observable()的使用
隨著組件的細(xì)化,就會(huì)遇到多組件狀態(tài)共享的情況,今天我們介紹的是 vue.js 2.6 新增加的 Observable API ,通過(guò)使用這個(gè) api 我們可以應(yīng)對(duì)一些簡(jiǎn)單的跨組件數(shù)據(jù)狀態(tài)共享的情況,感興趣的可以了解一下2021-06-06