为什么本地Vue项目请求后端接口被浏览器拦截了？

UE丶炳錦提问于 2026-03-16 21:03:22 阅读 82

前端

我用 Vue 3 写了个小项目，本地开发时用 axios 调用公司测试服务器的接口（http://api.test.com/user），但浏览器控制台一直报 CORS 错误，说“跨源请求被阻止”。明明后端同事说已经加了 Access-Control-Allow-Origin: *，可还是不行。是我前端写错了吗？

我的调用代码是这样的：

<script setup>
import axios from 'axios'

const fetchData = async () => {
  try {
    const res = await axios.get('http://api.test.com/user')
    console.log(res.data)
  } catch (err) {
    console.error('请求失败:', err)
  }
}
</script>

<template>
  <button @click="fetchData">获取用户数据</button>
</template>

试过在 vite.config.js 里配 proxy 也没生效，现在完全懵了……到底该咋解决？

安全策略

我来解答赞 1 收藏

反馈

1 条解答

司马柯慧 Lv1

这个问题挺常见的，我来帮你捋一捋。

先说后端那个的问题：如果你的请求带了 credentials（比如 cookie），那就不管用了，浏览器会直接拒绝。得改成具体的域名。

不过本地开发的话，根本没必要折腾后端，用 Vite 的 proxy 就能完美解决。

你在 vite.config.js 里配的 proxy 没用上，很可能是配置写错了或者请求地址没改对。正确的姿势是这样的：

首先 vite.config.js 要这样配：

export default defineConfig({

  server: {

    proxy: {

      '/api': {

        target: 'http://api.test.com',

        changeOrigin: true,

        rewrite: (path) => path.replace(/^/api/, '')

      }

    }

  }

})

然后 axios 请求地址改成相对路径：

const res = await axios.get('/api/user')

这样浏览器请求的是同源的 /api/user，Vite 再帮你转发到后端，完全绕过浏览器的跨域限制。

你之前配的 proxy 没生效，大概率是因为请求地址还是写的完整 URL http://api.test.com/user，没有改成走代理的相对路径。

另外检查一下 axios 是不是设置了 withCredentials: true，如果有的话先去掉，这个在本地代理场景下没必要，还会惹麻烦。

生产环境的话该让后端配置 CORS 还是要配置，或者走公司统一的网关代理。

2026-03-17 12:09