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

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

前端

我用 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 也没生效，现在完全懵了……到底该咋解决？

安全策略

我来解答赞 6 收藏

反馈

2 条解答

诸葛艳花 Lv1

CORS 这个东西真是烦人。后端说加了 Access-Control-Allow-Origin: *，但实际上可能没生效或者有其他限制。先检查一下网络请求的响应头，确保真的加了。

既然 vite.config.js 配置 proxy 没生效，可以试试另一种方法，在 axios 请求里加个 withCredentials: false，有时候默认是 true 导致跨域问题。还有就是确保你的服务器端允许所有来源或者至少允许你的本地开发地址。

先试试修改 axios 请求：

const fetchData = async () => {

  try {

    const res = await axios.get('http://api.test.com/user', { withCredentials: false })

    console.log(res.data)

  } catch (err) {

    console.error('请求失败:', err)

  }

}

如果还是不行，那就只能去后端看下配置了。他们可能需要在服务器端做更详细的 CORS 设置，比如允许特定的方法、头部信息等。

希望这些能帮到你，复制过去试试吧。

2026-03-21 17:02

司马柯慧 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