Vue3配置vite.config.js解決跨域問題的方法
更新時間：2024年07月09日 10:01:02 作者：她似晚風般溫柔789
跨域一般出現(xiàn)在開發(fā)階段,由于線上環(huán)境前端代碼被打包成了靜態(tài)資源,因而不會出現(xiàn)跨域問題,這篇文章主要給大家介紹了關(guān)于Vue3配置vite.config.js解決跨域問題的相關(guā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.
解決問題
原 request.js
// 導(dǎo)入 axios 依賴
import axios from 'axios';
// 定義baseUrl
const baseURL = 'http://localhost:8080';
// 創(chuàng)建實例
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)建實例
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 中添加請求代理
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': { // 獲取請求中帶 /api 的請求
target: 'http://localhost:8080', // 后臺服務(wù)器的源
changeOrigin: true, // 修改源
rewrite: (path) => path.replace(/^\/api/, "") // /api 替換為空字符串
}
}
}
})
注意: rewrite: (path) => path.replace(/^/api/, “”) 中 /^/api/ 不要加引號
總結(jié)
到此這篇關(guān)于Vue3配置vite.config.js解決跨域問題的文章就介紹到這了,更多相關(guān)Vue3配置vite.config.js解決跨域內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue項目持久化存儲數(shù)據(jù)的實現(xiàn)代碼
這篇文章主要介紹了vue項目持久化存儲數(shù)據(jù)的實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
這篇文章主要為大家詳細介紹了Vue的底層原理，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
require.context是webpack提供的一個api,通常用于批量注冊組件,下面這篇文章主要給大家介紹了關(guān)于vue?require.context()用法的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-04-04
如何在 Vite 項目中自動為每個 Vue 文件導(dǎo)入 base.les
在Vite配置中通過添加css.preprocessorOptions實現(xiàn)自動導(dǎo)入base.less,簡化Vue組件的樣式設(shè)置,提高代碼的可維護性,感興趣的朋友跟隨小編一起看看吧2024-09-09
vue源碼解析computed多次訪問會有死循環(huán)原理
這篇文章主要為大家介紹了vue源碼解析computed多次訪問會有死循環(huán)原理，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
vue關(guān)于接口請求數(shù)據(jù)過大導(dǎo)致瀏覽器崩潰的問題
這篇文章主要介紹了vue關(guān)于接口請求數(shù)據(jù)過大導(dǎo)致瀏覽器崩潰的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了Vue組件數(shù)據(jù)傳遞與props校驗方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
本文主要介紹了VUE腳手架框架編寫簡潔的登錄界面的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
這篇文章主要為大家詳細介紹了vue實現(xiàn)簡單瀑布流布局，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
本文介紹了如何在Windows系統(tǒng)上安裝和配置Vue.js開發(fā)環(huán)境,包括安裝VS Code、Node.js、Vue CLI以及創(chuàng)建和啟動一個Vue項目2025-01-01