Question

我用 Spring 构建了一个后端，现在我想用 React 构建一个前端。当我尝试获取我的请求 URL 时，我收到以下错误：

从源 'http://localhost:3000' 获取在 'http://localhost:8080/demo/getAll' 的访问已被 CORS 策略阻止：没有 'Access-Control-Allow-Origin' 标头是出现在请求的资源上。如果不透明响应满足您的需求，请将请求的模式设置为“no-cors”以在禁用 CORS 的情况下获取资源。

这是我的代码：

const fetchItems = async () => {
fetch('http://localhost:8080/demo/getAll').then(response => response.json()).then(data => 
console.log(data));
};

有谁知道问题是什么以及我该如何解决？

Answer 1

https://www.w3.org/Security/wiki/Same_Origin_Policy

<块引用>

来源由 URL 的方案、主机和端口定义

端口必须与过去的同源相同。

对于 react，您拥有它的代理，因此您向 :3000 发出请求，它的行为就像您将其发送至 :8080

如果您使用 Create React App，这很容易完成：https://create-react-app.dev/docs/proxying-api-requests-in-development/

否则，最好的办法可能是修改后端的 CORS 标头：How does Access-Control-Allow-Origin header work?

从源“http://localhost:3000”获取“http://localhost:8080/demo/getAll”的访问权限已被 CORS 策略阻止

1 个答案: