Vue3配置vite.config.js解決跨域問(wèn)題的方法
更新時(shí)間：2024年07月09日 10:01:02 作者：她似晚風(fēng)般溫柔789
跨域一般出現(xiàn)在開發(fā)階段,由于線上環(huán)境前端代碼被打包成了靜態(tài)資源,因而不會(huì)出現(xiàn)跨域問(wèn)題,這篇文章主要給大家介紹了關(guān)于Vue3配置vite.config.js解決跨域問(wèn)題的相關(guān)資料,需要的朋友可以參考下
問(wèn)題再現(xiàn)
Access to XMLHttpRequest at ‘http://localhost:8080/user/register’ from origin ‘http://localhost:5173’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
解決問(wèn)題
原 request.js
// 導(dǎo)入 axios 依賴
import axios from 'axios';
// 定義baseUrl
const baseURL = 'http://localhost:8080';
// 創(chuàng)建實(shí)例
const instance = axios.create({
baseURL: baseURL,
});
// 添加響應(yīng)攔截器
instance.interceptors.response.use(
result => {
return result.data;
},
err => {
alert("服務(wù)異常");
return Promise.reject(err);
}
)
export default instance;
修改 request.js
// 導(dǎo)入 axios 依賴
import axios from 'axios';
// 定義baseUrl
const baseURL = '/api';
// 創(chuàng)建實(shí)例
const instance = axios.create({
baseURL: baseURL,
});
// 添加響應(yīng)攔截器
instance.interceptors.response.use(
result => {
return result.data;
},
err => {
alert("服務(wù)異常");
return Promise.reject(err);
}
)
export default instance;
在 vite.config.js 中添加請(qǐng)求代理
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
// 配置代理
server: {
proxy: {
'/api': { // 獲取請(qǐng)求中帶 /api 的請(qǐng)求
target: 'http://localhost:8080', // 后臺(tái)服務(wù)器的源
changeOrigin: true, // 修改源
rewrite: (path) => path.replace(/^\/api/, "") // /api 替換為空字符串
}
}
}
})
注意: rewrite: (path) => path.replace(/^/api/, “”) 中 /^/api/ 不要加引號(hào)
總結(jié)
到此這篇關(guān)于Vue3配置vite.config.js解決跨域問(wèn)題的文章就介紹到這了,更多相關(guān)Vue3配置vite.config.js解決跨域內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue ElementUI實(shí)現(xiàn):限制輸入框只能輸入正整數(shù)的問(wèn)題
這篇文章主要介紹了Vue ElementUI實(shí)現(xiàn):限制輸入框只能輸入正整數(shù)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
vue實(shí)現(xiàn)簡(jiǎn)單學(xué)生信息管理
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)單學(xué)生信息管理，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
文章介紹了如何配置Vue.js項(xiàng)目的端口,以避免與Spring?Boot后臺(tái)項(xiàng)目的默認(rèn)端口沖突,通過(guò)修改Vue的配置文件,將端口更改為其他值,如8081,可以成功啟動(dòng)Vue項(xiàng)目2026-01-01
這篇文章主要介紹了使用vue-upload上傳圖片的詳細(xì)使用說(shuō)明，文中有相關(guān)的代碼示例供大家參考，感興趣的小伙伴一起跟著小編來(lái)學(xué)習(xí)吧2023-05-05
富文本編輯器quill.js開發(fā)之自定義格式擴(kuò)展
這篇文章主要為大家介紹了富文本編輯器quill.js開發(fā)之自定義格式擴(kuò)展,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
下面小編就為大家分享一篇淺談vue的幾種綁定變量的值 防止其改變的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
vue-router?導(dǎo)航完成后獲取數(shù)據(jù)的實(shí)現(xiàn)方法
這篇文章主要介紹了vue-router?導(dǎo)航完成后獲取數(shù)據(jù),通過(guò)使用生命周期的 created() 函數(shù)，在組件創(chuàng)建完成后調(diào)用該方法，本文結(jié)合實(shí)例代碼給大家講解的非常詳細(xì)需要的朋友可以參考下2022-11-11
Vue中scrollIntoView()方法詳解與實(shí)際運(yùn)用舉例
這篇文章主要給大家介紹了關(guān)于Vue中scrollIntoView()方法詳解與實(shí)際運(yùn)用舉例的相關(guān)資料,該scrollIntoView()方法將調(diào)用它的元素滾動(dòng)到瀏覽器窗口的可見區(qū)域,需要的朋友可以參考下2023-12-12
本文主要介紹了vue中傳參params和data的區(qū)別，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue iview實(shí)現(xiàn)分頁(yè)功能
這篇文章主要為大家詳細(xì)介紹了vue iview實(shí)現(xiàn)分頁(yè)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07