Question

我正在使用React JS构建一个REST消费者，我已经构建了一个REST api作为后端服务，前端将是一个完全不同的应用程序。将前端与后端分开。

我目前正在努力的是从前端到后端发出跨源请求。后端托管在 http://localhost:8080 中，前端react应用托管在 http://localhost:3000 中。发出请求时，我在控制台上收到以下错误：

无法加载http://localhost:8080/api/something：对预检请求的响应未通过访问控制检查：所请求的资源上没有'Access-Control-Allow-Origin'标头。因此，不允许访问来源“ http://localhost:3000”。如果不透明的响应满足您的需求，请将请求的模式设置为“ no-cors”以在禁用CORS的情况下获取资源。

现在，我已经修复了此错误，并使用了chrome扩展程序以允许CORS：https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en

但这只是暂时的解决方案，我尝试添加Access-Control-Allow-Origin标头，但这似乎不起作用。

这是我的代码用来发出请求：

let Myheaders = new Headers()
Myheaders.append("Access-Control-Allow-Origin", "http://localhost:8080/")

let res = await fetch("http://localhost:8080/api/something", 
{
    method: "get", 
    mode: "cors",
    headers: Myheaders
})
let res1 = await res.json()

我尝试为带有反斜杠或不带有反斜杠的 Access-Control-Allow-Origin 标头添加多个值，但似乎没有工作。

有人遇到相同的问题并且有解决方案吗？

Answer 1

这是一个后端问题，而不是前端您应该允许后端使用cors，这取决于后端中使用的技术

如何添加跨源资源共享请求标头？

1 个答案: