为什么本地开发时请求后端接口总是跨域失败？

百里柯豫提问于 2026-03-15 09:17:20 阅读 48

前端

我在本地用 localhost:3000 启动了 React 项目，调用公司测试环境的 API（比如 https://api.test.com/user），浏览器一直报 CORS 错误。后端同事说他们已经加了 Access-Control-Allow-Origin: *，但还是不行，控制台显示：

Access to fetch at 'https://api.test.com/user' from origin 'http://localhost:3000' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response is 'https://www.test.com', which does not equal the supplied origin.

这说明后端其实没配成 *？还是我哪里理解错了？

跨域解决

我来解答赞 6 收藏

反馈

1 条解答

司空爱军 Lv1

问题很明确了，后端并没有配成 *，实际配的是 https://www.test.com。

从错误信息就能看出来，响应头返回的是 https://www.test.com，不是 *。你同事可能搞错了，或者后端配置有多个环境，他配的是正式域名而不是测试域名。

CORS 的逻辑是这样的：浏览器先发一个 OPTIONS 预检请求，后端根据请求头里的 Origin 来决定返回什么 Access-Control-Allow-Origin。如果后端配的是固定的域名列表，那只有列表里的域名才能通过，显然 localhost:3000 不在列表里。

解决方案有几个：

一是让后端同事把测试环境的允许列表加上 localhost:3000，或者直接改成（不过在带 cookie 的场景下不生效，你们如果涉及 cookie 得具体看）。

二是如果后端不方便改，你本地可以架一个代理。在 React 项目里很简单，vite 或 webpack 都支持配置代理：

在 vite.config.js 里加：

export default {

  server: {

    proxy: {

      '/api': {

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

        changeOrigin: true,

      }

    }

  }

}

然后请求改成相对路径 /api/user，代理会帮你转发到后端，这样浏览器看到的是同源请求，根本不会触发 CORS。

三是你可以装个浏览器插件比如 Allow CORS 临时绕过，但这个只能本地开发用，上线就不行了。

最靠谱的还是方案二，配个本地代理，一劳永逸，也不依赖后端改配置。

2026-03-16 20:00