2

ReactJS を使用して Nominatim API を実装したいと考えています。URL を要求すると、次のエラーが表示されます。

クレデンシャル フラグが true の場合、「Access-Control-Allow-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

}

しかし、うまくいきません。助言がありますか?

4

2 に答える 2