vite/Vuecli配置proxy代理解決跨域問(wèn)題
更新時(shí)間：2023年12月29日 08:54:22 作者：williamyi74
這篇文章主要介紹了vite/Vuecli配置proxy代理解決跨域問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vite/Vuecli配置proxy代理解決跨域
上代碼
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';
// https://vitejs.dev/config/
export default defineConfig({
server: {
port: 9090,
strictPort: true, // 嚴(yán)格端口 true:如果端口已被使用，則直接退出，而不會(huì)再進(jìn)行后續(xù)端口的嘗試。
/**
* @description 解決chrome設(shè)置origin:*也跨域機(jī)制,代理/api前綴到服務(wù)基地址
* 最終的地址會(huì)將axios設(shè)置的baseUrl:/dev代理拼接成[target][/dev][/xxx/yyy]
*/
proxy: {
'/dev': {
target: 'http://www.baidu.com', // 接口基地址
rewrite: path => {
console.log(path); // 打印[/dev/xxx/yyy] 這就是http-proxy要請(qǐng)求的url,如果服務(wù)器真實(shí)地址是沒(méi)有/dev前綴的話要replace掉,如果有可以不replace
return path.replace(/^\/dev/, '');
}
}
}
},
plugins: [vue()],
resolve: {
alias: {
'@': resolve(__dirname, '.', 'src') // 設(shè)置 @ 指向 src
}
},
})Vuecli配置
devServer: {
port: '9090',
proxy: {
[process.env.VUE_APP_PREFIX]: {
target: process.env.VUE_APP_BASEURL,
secure: true,
changeOrigin: true,
pathRewrite: {
[`^${process.env.VUE_APP_PREFIX}`]: '',
},
},
},總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue2.0 使用element-ui里的upload組件實(shí)現(xiàn)圖片預(yù)覽效果方法
今天小編就為大家分享一篇vue2.0 使用element-ui里的upload組件實(shí)現(xiàn)圖片預(yù)覽效果方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)分頁(yè)的三種效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要介紹了vue2.x對(duì)象單層劫持的原理實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
ElementUI如何修改el-cascader的默認(rèn)樣式
ElementUI 是一套u(yù)i組件庫(kù)，目前最新版本 react 和 vue 等主流框架都有支持。該庫(kù)默認(rèn)主題色是天藍(lán)色，若用于項(xiàng)目開發(fā)，難免遇到要需求修改其默認(rèn)樣式的情況，這篇文章主要介紹了ElementUI如何修改el-cascader的默認(rèn)樣式,需要的朋友可以參考下2023-12-12
vue.js相比于Angular.js，Vue.js提供了更加簡(jiǎn)潔、更易于理解的API，使得我們能夠快速地上手并使用Vue.js。下面通過(guò)本文給大家分享vue.js語(yǔ)法及常用指令，希望對(duì)大家有所幫助2017-10-10
在Vue?3中使用OpenLayers加載GPX數(shù)據(jù)并顯示圖形效果
本文介紹了如何在Vue 3中使用OpenLayers加載GPX格式的數(shù)據(jù)并在地圖上顯示圖形,通過(guò)使用OpenLayers的GPX解析器,我們能夠輕松地處理和展示來(lái)自GPS設(shè)備的地理數(shù)據(jù),需要的朋友可以參考下2024-12-12
vue項(xiàng)目中在可編輯div光標(biāo)位置插入內(nèi)容的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue項(xiàng)目中在可編輯div光標(biāo)位置插入內(nèi)容的實(shí)現(xiàn)代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01
axios+Vue實(shí)現(xiàn)上傳文件顯示進(jìn)度功能
這篇文章主要介紹了axios+Vue上傳文件顯示進(jìn)度效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
在vue中,v-for的索引index在html中的使用方法
下面小編就為大家分享一篇在vue中,v-for的索引index在html中的使用方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
這篇文章主要為大家詳細(xì)介紹了Vue的過(guò)濾器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02