質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

2578閲覧

AWS fetchにheadersをつけるとエラーになる

te_ff

総合スコア13

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

1クリップ

投稿2021/10/04 11:41

前提・実現したいこと

APIGatewayでCognitoAuthorizerを利用し、Lambdaを実行しています。
fetchによりデータを取得しているのですが、headerを指定するとCORSエラーになります。

解決策/原因ご教授いただきたいです。

発生している問題・エラーメッセージ

Access to fetch at 'https://xxxxxxx.execute-api.ap-northeast-1.amazonaws.com/Prod/get_project' from origin 'http://localhost:3001' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

該当のソースコード

Next.js

1export const getProjectAll = async () => { 2 const token = getToken(); 3 const res = await fetch(process.env.API_SERVER + process.env.GET_PROJECT, { 4 method: "GET", 5 headers: { 6 "Authorization": token, 7 }, 8 }); 9 return await toJson(res); 10};

python

1import json 2 3def lambda_handler(event, context): 4 5 ###データ取得 6 7 return { 8 "statusCode": 200, 9 "headers": { 10 "Content-Type": 'application/json', 11 "Access-Control-Allow-Headers": "Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token, Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers", 12 "Access-Control-Allow-Origin": "*", 13 "Access-Control-Allow-Methods": "OPTIONS,POST,GET", 14 }, 15 "body": json.dumps(data, indent=4), 16 } 17

試したこと

POSTMANを利用しデータ取得
→ 問題なし
POSTMANでHeader Authorizationを指定し取得
→ 問題なし
APIGatewayのAuthorizerをなくし、Header指定なしで取得
→ 問題なし

補足情報(FW/ツールのバージョンなど)

headerにAuthorization以外の物を指定してもエラーになる

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

下記記載のCloudFormationをCognitoAuthorizerに変更すると無事とおりました。
https://qiita.com/kter/items/c2732247db919a5fd51f

・OPTIONSメソッドにAuthorizerが適用されていた
・OPTIONSメソッドにレスポンスヘッダーが記載されていなかった
が原因かと思われます。

最終的なCloudFormationを記載しておきます。

MyApi: Type: AWS::Serverless::Api Properties: StageName: Prod Cors: AllowMethods: "'GET,POST,OPTIONS,DELETE,PUT'" AllowHeaders: "'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token, Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers'" AllowOrigin: "'*'" GatewayResponses: DEFAULT_4XX: ResponseParameters: Headers: Access-Control-Allow-Methods: "'GET,POST,OPTIONS,DELETE,PUT'" Access-Control-Allow-Headers: "'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token, Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers'" Access-Control-Allow-Origin: "'*'" DEFAULT_5XX: ResponseParameters: Headers: Access-Control-Allow-Methods: "'GET,POST,OPTIONS,DELETE,PUT'" Access-Control-Allow-Headers: "'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token, Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers'" Access-Control-Allow-Origin: "'*'" Auth: AddDefaultAuthorizerToCorsPreflight: false DefaultAuthorizer: MyCognitoAuthorizer Authorizers: MyCognitoAuthorizer: UserPoolArn: "ユーザプールARN"

投稿2021/10/05 03:27

te_ff

総合スコア13

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問