ReactJS：对 fetch 的访问已被 CORS 策略阻止

Posted 2023-03-04

【中文标题】ReactJS：对 fetch 的访问已被 CORS 策略阻止

【英文标题】：ReactJS: access to fetch has been blocked by CORS policy

【发布时间】：2021-03-18 16:11:57

【问题描述】：

我的 ReactJS 项目中出现以下错误： “访问 fetch 已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头 如果 opaque 满足您的需要，请将请求模式设置为 'no-cors' 以获取禁用 CORS 的资源。"

这是我向后端发送请求的方式：

export const sendRequest = async ( endpoint = '' ,
 method = 'GET', body) => 
    const response = await fetch(`$url$endpoint`, 
        method,
        headers:  "Content-Type": "application/json" ,
        body: JSON.stringify(body)
    )
    const data = await response.json();

    return data;

我首先认为这是一个后端问题，但我在那里检查，发现后端 CORS 访问已为相同的标头和客户端启用。

我应该对上面的函数做任何修改吗？？

【参考方案1】：

有一个名为 cors 的 npm 模块。您可以将其安装在您的后端。如果您使用的是 ExpressJS，您可以使用 app.use(cors()) 将 cors 作为中间件。使用请求中设置的等效标头，它应该可以工作