Reactjs Nominatim API-Cors

Question

我想使用ReactJS实现Nominatim。当我请求URL时，我会得到以下错误：

当凭据标志为真时，通配符“*”不能在“访问控制-允许-原产地”标题中使用。因此，“http://localhost:8080”源是不允许访问的。XMLHttpRequest的凭据模式由withCredentials属性控制。

经过一些研究，我发现我必须使用CORS来访问数据。所以我编辑了Webpack配置中的标题。在我运行应用程序的服务器上，代码如下：

devServer: {
      headers: {
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Credentials": "true",
    "Access-Control-Allow-Headers": "Content-Type, Authorization, x-id, Content-Length, X-Requested-With",
    "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS"
},  
  inline: true,
  port: 8080

}

但不起作用。有什么建议吗？

Answer 1

尝试在生产服务器上测试它。

Answer 2

如果您在生产中使用上述配置，您将在internet上打开服务器，这些并不是最安全的产品配置。

您可以在reactjs中直接修复这个问题，方法是添加

"proxy": "http://localhost:8080"

在您的react项目的package.json文件中。

我写了一篇关于它的完整文章，在这里您可以查看它并了解更多的https://minasami.com/2021/06/10/cors-errors-fix-with-reactjs.html。