vue3解決跨域問題詳細(xì)代碼親測有效
vue3解決跨域問題詳細(xì)代碼親測有效
1.在vue.config.js中 放入以下代碼:
module.exports = { devServer: { proxy: { '/api': { target: 'http://api.tubecoin.org', //這里填入你要請求的接口的前綴 ws: true, //代理websocked changeOrigin: true, //虛擬的站點(diǎn)需要更換origin secure: true, //是否https接口,我用的http但是我變成false他打包后會報錯,所以先true pathRewrite: { '^/api': '' //重寫路徑 } } } } }
2. 需要寫接口的頁面引入:
import Axios from "axios"; Axios.defaults.baseURL = "/api";
3.頁面中的方法:
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); //這個是引入的element plus中的提示框 });
關(guān)于解決vue3的跨域問題
項目場景:
提示:這里簡述項目相關(guān)背景:
當(dāng)我們使用vue3搭建前后端分離項目時,往往會出現(xiàn)跨域問題。前端往往會提示:
原因分析:
例如,我這里,前端的項目的請求地址是http://localhost:8085/,訪問后端的接口為http://localhost:8081/ResourcesCenter/BaseMapStyle/selectByPage,由于端口的不一致,所以出現(xiàn)了跨域問題。
解決方案:
第一步:找到vue.config.js文件,添加如下代碼:
module.exports = { devServer: { open: true, host: 'localhost', port: 8085, //這里的ip和端口是前端項目的;下面為需要跨域訪問后端項目 proxy: { '/ResourcesCenter': { target: 'http://localhost:8081/ResourcesCenter/',//這里填入你要請求的接口的前綴 ws:true,//代理websocked changeOrigin:true,//虛擬的站點(diǎn)需要更管origin secure: true, //是否https接口 pathRewrite:{ '^/ResourcesCenter':''//重寫路徑 }, headers: { referer: 'http://localhost:8081/ResourcesCenter/', //這里后端做了拒絕策略限制,請求頭必須攜帶referer,否則無法訪問后臺 } } } } }
第二步,就是如何調(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解決跨域問題詳細(xì)代碼親測有效的文章就介紹到這了,更多相關(guān)vue3解決跨域內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue3圖片上傳報錯:Required?part?‘file‘?is?not?present.的原因及解決方法
這篇文章主要介紹了Vue3圖片上傳報錯:Required?part?‘file‘?is?not?present.的原因及解決方法,文中通過代碼示例講解的非常詳細(xì),對大家解決問題有一定的幫助,需要的朋友可以參考下2024-09-09關(guān)于vue-socket.io使用及版本原因消息無法監(jiān)聽bug
這篇文章主要介紹了關(guān)于vue-socket.io使用及版本原因消息無法監(jiān)聽bug,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教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ǔ)用法、動態(tài)路由匹配、嵌套路由、編程式路由、命名路由以及命名視圖等相關(guān)知識,需要的朋友可以參考借鑒,下面來一起看看吧。2017-05-05Vue局部組件數(shù)據(jù)共享Vue.observable()的使用
隨著組件的細(xì)化,就會遇到多組件狀態(tài)共享的情況,今天我們介紹的是 vue.js 2.6 新增加的 Observable API ,通過使用這個 api 我們可以應(yīng)對一些簡單的跨組件數(shù)據(jù)狀態(tài)共享的情況,感興趣的可以了解一下2021-06-06