headers に独自のキーを追加してリクエストを送る
0. 環境
nginx:1.18.0
vue.js:2.6.12
1. 概要
ALB + ec2(nginx+gunicorn+flask) の構成でデプロイし、ALBにてリクエストヘッダーを確認し、アクセス制限をかけるのがゴールでした。UI側は cloudfront + s3 でデプロイ済みで、ここからサーバーにリクエストを送ります。
リクエストを送る際に cors のエラーが発生し、解決に時間がかかってしまったので、備忘録として書いておきます。
- 発生したエラー
Access to XMLHttpRequest at 'http://xxx.xxx.elb.amazonaws.com/yyy' from origin 'http://localhost:8080' 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.
2. 結論
nginx の設定(confファイル)にPreflight Request
に対する設定を記述する。
location / {
# preflightに対するレスポンス指定
if ($request_method = 'OPTIONS') {
add_header Access-Control-Allow-Origin '*'; # corsの許可
add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE'; # メソッドの許可
add_header Access-Control-Allow-Headers 'Origin, Authorization, Accept, Content-Type, key'; # ここにヘッダーに追加するキーを追加する!
add_header Access-Control-Max-Age 3600;
...
3. 各種設定・コードの確認
3.1 ALBの設定
ALB ではヘッダーにkey=value
が含まれている場合は、ec2に転送する設定。
3.2 UI(vue.js)側のリクエストコード
ヘッダーにkey
を追加し、axios で ALB に GETリクエストを送信。
let config = {
headers: {
'key': 'value'
},
};
this.axios
.get('http://xxx.xxx.elb.amazonaws.com/hello', config)
.then((response) => {
console.log(response)
...
4. ハマった点・解決方法
① CORS のリクエストはSimple Request
とPreflight Request
の2種類に分けられる。Preflight Request
の場合、サーバー側で許可する設定が必要
② リクエストヘッダーに独自のヘッダーを追加する場合(今回のケースだとkey
)は、サーバー側でそれを許可する設定が必要
① の解決
これについてはこのサイトが大変参考になりました。
CORS(Cross-Origin Resource Sharing)について整理してみた
以下の条件の全てに該当する場合、ブラウザはpreflightリクエストを送る必要がないと判断し、シンプルなリクエストを送信します。それ以外の場合は、preflightリクエストを送信します。
・ HTTPメソッドがGET, POST, HEADのいずれか
・ HTTPヘッダにAccept, Accept-Language, Content-Language, Content-Type以外のフィールドが含まれない
・ Content-Typeの値はapplication/x-www-form-urlencoded, multipart/form-data, text/plainのいずれか
今回のケースだとリクエストヘッダーにkey
が入っているため Preflight Request
とみなされます。なおPreflight Request
のレスポンスには、アクセス許可するメソッドをレスポンスヘッダに含める必要があるようです(結論のコードAccess-Control-Allow-Methods
の部分)。
② の解決
メソッドを許可したのと同様に、ヘッダーの許可も必要になります。
こちらのサイトには次のような記述があります。
CORS セーフリストリクエストヘッダー, Accept, Accept-Language, Content-Language, Content-Type は常に許可されており、このヘッダーで列挙する必要はありません。
上記のヘッダー以外はデフォルトでは許可されていないようです。今回のケースではkey
を許可したいので追加します(結論のコードAccess-Control-Allow-Headers
の部分)。
5. 感想
CORSについてあまり理解していなかったので、解決にかなり時間を費やしてしまいました。
間違っている点、補足等あればコメントを頂きたいです!
参考
CORSまとめ
なんとなく CORS がわかる...はもう終わりにする。
CORS(Cross-Origin Resource Sharing)について整理してみた
MDN web docs
(ありがとうございました..)
Author And Source
この問題について(headers に独自のキーを追加してリクエストを送る), 我々は、より多くの情報をここで見つけました https://qiita.com/smoto-shei/items/17ec9667ed56796ba12c著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .