vue3 vite配置跨域及不生效問題解決

更新時間：2023年07月18日 10:39:20 作者：Motion_zq

這篇文章主要介紹了vue3 vite配置跨域以及不生效問題,本文給大家分享完美解決方案，需要的朋友可以參考下

vue3 vite配置跨域以及不生效問題

1. 在vite.config中添加配置

server: {
    host: "0.0.0.0",
    cors: true,
    port: 8991,
    open: false, //自動打開
    proxy: {
      // 這里的ccc可亂寫, 是拼接在url后面的地址 如果接口中沒有統(tǒng)一的后綴可自定義
      // 如果有統(tǒng)一后綴, 如api, 直接寫api即可, 也不用rewrite了
      "^/ccc": {
        target: "http://116.62.200.158", // 真實接口地址, 后端給的基地址
        changeOrigin: true, // 允許跨域
        rewrite: (path) => path.replace(/^\/ccc/, ""), // 將ccc替換為空
      },
    },
  },

2. 在.env.development中配置開發(fā)環(huán)境下的基地址(沒有該文件夾手動新建)

VITE_BASEURL='/ccc'

3. 配置axios的基地址

const instancs = axios.create({
  baseURL: import.meta.env.VITE_BASEURL,
});

最后:

我之前是犯過一個錯誤的, 導致我搞了半天都沒搞好... 就是配置完vite.config, 那個/ccc后綴是接口沒有的自己加的, 那么就要手動加上去了...

這是我們公司后端的問題, 大部分后端都會有統(tǒng)一的后綴的, 比如api, 但是我這后端沒按照這樣的規(guī)范來, 然后自己也比較菜... 如果這樣配置到時候生產(chǎn)就不能這樣寫了, 目前我這樣配置在開發(fā)環(huán)境下能正常跑。

解決vue3+vite跨域失敗問題

vue3+vite用proxy跨域出現(xiàn)的問題

一、改錯前的代碼

vite.config.js中的代碼

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/api': {
        target: "http://gmall-h5-api.atguigu.cn", //跨域地址
        changeOrigin: true, //支持跨域
        rewrite: (path) => path.replace(/^\/api/, '')   //重寫路徑
      }
    }
  }
})

發(fā)送請求的文件中的跨域請求代碼

import axios from 'axios'
axios.get('/api/product/getBaseCategoryList').then((res) => {
    console.log('success:' + res.data);
}).catch((err) => {
    console.log('failed:' + err.data);
});

出現(xiàn)這些錯誤是因為 rewrite，寫這行代碼時要看接口有沒有帶上/api，如果接口本身就有/api則不需要重寫路徑，將重寫路徑的這行代碼刪掉就好了

二、改正后vite.config.js代碼

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/api': {
        target: "http://gmall-h5-api.atguigu.cn", //跨域地址
        changeOrigin: true, //支持跨域
      }
    }
  }
})

之后就跨域正?？缬蛄?/p>

三、如果想要保留rewrite這行代碼，就需要添加攔截器，配置baseURL:“/api”

發(fā)送請求的文件中的跨域請求代碼如下

import axios from 'axios'
const requests = axios.create({
    baseURL:"/api",
    timeout:5000
});
//請求攔截器，在發(fā)送請求之前，請求攔截器可以檢測到，可以在請求發(fā)出去之前做一些事情
requests.interceptors.request.use(config=>{
    return config;
});
//相應攔截器
requests.interceptors.response.use((res)=>{
    return res.data;
},(error)=>{
    alert(error.message);
    return new Promise();
})
requests.get('/api/product/getBaseCategoryList').then((res) => {
    console.log('success:' + res.data);
}).catch((err) => {
    console.log('failed:' + err.data);
});

這樣寫也可以跨域成功

到此這篇關于vue3 vite配置跨域以及不生效問題的文章就介紹到這了,更多相關vue3 vite配置跨域內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: