CORSポリシーによるアクセスブロックの解決方法


' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.」は、CORSポリシーによってアクセスがブロックされたことを示しています。

このエラーを解決するためには、いくつかの方法があります。以下にいくつかの解決策とそれに対するコード例を示します。

  1. サーバーサイドでCORSヘッダーを追加する: サーバーサイドのコードにて、レスポンスヘッダーにCORSヘッダーを追加することで、特定のオリジンからのリクエストを許可することができます。以下はPython Flaskフレームワークを使用した例です。

    from flask import Flask, jsonify
    app = Flask(__name__)
    @app.route('/')
    def hello_world():
       response = jsonify({'message': 'Hello, CORS!'})
       response.headers.add('Access-Control-Allow-Origin', '*')
       return response
    if __name__ == '__main__':
       app.run()
  2. プロキシサーバーを使用する: ブラウザから直接リクエストを送信する代わりに、プロキシサーバーを使用してリクエストを転送することができます。プロキシサーバーは、クライアントからのリクエストを受け取り、別のサーバーに転送するため、同一オリジン内で処理されるためCORSエラーが発生しません。