亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Vue3配置vite.config.js解決跨域問題的方法

 更新時(shí)間：2024年07月09日 10:01:02   作者：她似晚風(fēng)般溫柔789  
跨域一般出現(xiàn)在開發(fā)階段,由于線上環(huán)境前端代碼被打包成了靜態(tài)資源,因而不會(huì)出現(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)建實(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解決跨域問題的文章就介紹到這了,更多相關(guān)Vue3配置vite.config.js解決跨域內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論