首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue3配置vite.config.js解决跨域

Vue3配置vite.config.js解决跨域问题的方法

2024-07-09 10:00:35 作者：她似晚风般温柔789

跨域一般出现在开发阶段,由于线上环境前端代码被打包成了静态资源,因而不会出现跨域问题,这篇文章主要给大家介绍了关于Vue3配置vite.config.js解决跨域问题的相关资料,需要的朋友可以参考下

问题再现

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

// 导入 axios 依赖
import axios from 'axios';
// 定义baseUrl
const baseURL = 'http://localhost:8080';
// 创建实例
const instance = axios.create({
    baseURL: baseURL,
});


// 添加响应拦截器
instance.interceptors.response.use(
    result => {
        return result.data;
    },
    err => {
        alert("服务异常");
        return Promise.reject(err);
    }
)

export default instance;

修改 request.js

// 导入 axios 依赖
import axios from 'axios';
// 定义baseUrl
const baseURL = '/api';
// 创建实例
const instance = axios.create({
    baseURL: baseURL,
});


// 添加响应拦截器
instance.interceptors.response.use(
    result => {
        return result.data;
    },
    err => {
        alert("服务异常");
        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',  // 后台服务器的源
        changeOrigin: true,   // 修改源
        rewrite: (path) => path.replace(/^\/api/, "")   //  /api 替换为空字符串
      }
    }
  }
})

注意: rewrite: (path) => path.replace(/^/api/, “”) 中 /^/api/ 不要加引号

总结

到此这篇关于Vue3配置vite.config.js解决跨域问题的文章就介绍到这了,更多相关Vue3配置vite.config.js解决跨域内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！