Reactjs Nominatim API-Cors答案

【问题标题】：Reactjs Nominatim API-CorsReactjs Nominatim API-Cors
【发布时间】：2017-03-23 23:42:37
【问题描述】：

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

当凭证标志为真时，不能在“Access-Control-Allow-Origin”标头中使用通配符“*”。因此，Origin '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

}

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

【问题讨论】：

标签： api reactjs cors nominatim

【解决方案1】：

尝试从生产服务器测试它

【讨论】：

【解决方案2】：

如果您在生产环境中使用上述配置，则意味着您的服务器在互联网上完全开放，这些都不是生产环境中最安全的配置。

您可以通过添加直接在reactjs 中修复它

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

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

我已经写了一篇完整的文章，大家可以查看了解更多https://minasami.com/2021/06/10/cors-errors-fix-with-reactjs.html

【讨论】：