在ReactJ上使用Fetch函数时如何处理CORS策略

Question

需要帮助j。我仍在学习ReactJs从PHP后端获取数据。我正在使用XAMPP作为本地服务器。但是，当我在ReactJ上集成Fetch函数时，我会出现CORS策略错误。

这是我的app.jsx上的

useEffect(() => { 
    fetch("http://localhost:81/opencart/index.php?route=api/create", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ items: [{ id: "xl-tshirt" }] }),
      })
      .then((res) => res.json())
      .then((data) => setClientSecret(data.clientSecret));
  }, []);

。

"proxy": "http://localhost:81/"

代码

访问'http：// localhost：81/opencart/index.php？route = api/create'rient'http：// localhost：3000'已被CORS策略阻止无法传递访问控制检查：没有“访问控制”标题在请求的资源上。如果不透明的响应满足您的需求，请将请求模式设置为“无库”，以通过禁用CORS来获取资源。

我该如何解决？

Answer 1

cors 问题肯定来自服务器。因此，理想的方法是将服务器设置为从交叉原点接受您的请求。

似乎您正在使用使用PHP构建的服务器，然后检查后端服务器以添加CORS配置。

对于Express.js和其他人来说，添加了几种方法，例如添加“ CORS”中间件。