web-dev-qa-db-ja.com

CORSポリシーによってブロックされたAPIゲートウェイ：「Access-Control-Allow-Origin」ヘッダーなし

この質問は重複している可能性があることは承知していますが、既存の質問のどれも私がしていないことを示していません...

サーバーレスフレームワークを使用してAPIをデプロイしましたが、CORSに問題があります。

私はaxiosを使用してgetリクエストをしています：

axios.get('https://test.execute-api.us-west-1.amazonaws.com/dev/test?from=2012-01-09T21:40:00Z')
     .then(response => {
       this.data = response.data;
     })
     .catch(error => console.log(error))

そして、私は次のエラーを受け取ります：

Access to XMLHttpRequest at 'https://test.execute-api.us-west-1.amazonaws.com/dev/test?from=2012-01-09T21:40:00Z' from Origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

私がすでにやったこと：

  • 次のようなメソッド応答を持つAPI GatewayにOPTIONSメソッドがあることを確認しました。

enter image description here

  • これらの変更を確実に展開しました。

また、私のLambda関数の応答は次のヘッダーを返します。

return events.APIGatewayProxyResponse{
    StatusCode: http.StatusOK,
    Headers: map[string]string{
        "Access-Control-Allow-Origin":      "http://localhost:8080",
        "Access-Control-Allow-Credentials": "true",
    },
    Body: string(jsonEvents),
}, nil

私も設定してみましたAccess-Control-Allow-Origin〜'*'

私のserverless.ymlファイルにはcors: true各関数イベント：

functions:
  deploymentFrequency:
    handler: bin/update/deployment-frequency
    events:
      - http:
          path: deployment-frequency
          method: post
          cors: true
  fetchDeploymentFrequency:
    handler: bin/fetch/deployment-frequency
    events:
      - http:
          path: deployment-frequency
          method: get
          cors: true

何が欠けていますか？何も動作しないようです。リクエストはPostmanから正常に機能し、ヘッダーが含まれているようです。そのため、これはOPTIONSメソッドの問題のようです。

goaws-api-gatewayserverless
4
Carlos Martinez

私の設定は：

(event, context, callback) => {
   callback(null, {
      statusCode: (code || 200),
      body: JSON.stringify(resp),
      headers: { 'Access-Control-Allow-Origin': '*'},
   });
}

そしてそれは私にとってはうまくいきます。私は以前と同じ問題を抱えていましたが、関数をCORS：trueで定義し、応答にヘッダーが含まれている限り、問題ありません。

注：私は構文「map [string] string」を理解していなかったため、この場合資格情報は必要ありません。

4
Cleriston

私は応答からのステータスコードを無視していたことがわかりました:(

実際に2つのエラーが発生していることに気付きました。

  • 不足しているContent-Typeヘッダーの406ステータスコード
  • CORSエラー

最初のエラーは、リクエストにContent-Typeヘッダーを渡していないために発生しました（そのヘッダーを予期していることを完全に忘れているコードにチェックがありました）。

2番目のエラーは、関数のエラー応答にAccess-Control-Allow-Originヘッダーを追加しなかったために発生しました。

3
Carlos Martinez

有効にするLambaプロキシ統合

return events.APIGatewayProxyResponse{
    StatusCode: http.StatusOK,
    Headers: map[string]string{
        "Access-Control-Allow-Origin": "*",
        "Content-Type": "application/json",
    },
    Body: string(jsonEvents),
}, nil

enter image description here

0
Shalauddin Ahamad Shuza