Vue 3.0 + vite + axios 跨域问题如何解决？

Question

vite.config.ts

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import path from 'node:path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vueJsx()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    cors: true,
    proxy: {
      "/api": {
        target: "http://localhost:8088",
        secure: false,
        changeOrigin: true, //this one is declare for cross
        rewrite: (path) => {console.log(path); return path.replace(/^\/api/, '')}
      }
    }
  }
})

axios.js的配置

import axios from "axios";


let config = {
    baseURL: '/api',
    timeout: 1000,
    withCredentials: true
}

const instance = axios.create(config)

export default instance

页面请求的代码：

$axios.post(‘/user/login’, {
        u_account: ruleForm.account,
        u_password: ruleForm.password
    }).then((response) => {
        if (response.data.code === 200) {
            let token = response.data.token
            console.log('success!')
            window.localStorage.setItem('token', token)
        } else {
            console.log('failed');
        }
    }).catch((err) => {
        console.log(err.message)
    })

然后发现vite的proxy是没有触发到的，一直都是调用的vue 的地址，提示“xhr.js:247 POST http://localhost:5173/api/user/login 404 (Not Found)”；请问大家这个该如何解决跨域的问题。

Answer 1

跨域问题,最好是服务端解决

Answer 2

vite 配置一下 proxy 就好了。
或者让后端给你加跨域头。或者修改你本地浏览器的配置，设置允许跨域请求。

---

1. 需要注意的点就是你 axios 配置的请求地址，需要使用你当前用 vite 启动的项目地址。不然仍旧会触发跨域问题。
2. 现在你的报错信息是 404 对应的是找不到请求接口并不是跨域问题，所以应该要确定你的代理配置的是否正确。或者是否有启动后端服务，因为看你是代理到本地的 8088 端口的。

---

相关阅读
开发服务器选项 | Vite 官方中文文档

Answer 3

看你的代理配置是想把localhost:5173/api/user/login代理到localhost:8088/user/login，现在404是因为你的localhost:8088/user/login接口不存在，你可以用postman先调试下这个接口试试

Answer 4

$axios.post(‘/user/login’, {
        u_account: ruleForm.account,
        u_password: ruleForm.password
    }).then((response) => {
        if (response.data.code === 200) {
            let token = response.data.token
            console.log('success!')
            window.localStorage.setItem('token', token)
        } else {
            console.log('failed');
        }
    }).catch((err) => {
        console.log(err.message)
    })

需要在请求的url最后加斜杠，即/user/login/