Cloud9の8080ポートで起動したVueアプリから8081ポートで起動したFast APIにリクエストを送った際にCORSエラーになる

Question

Cloud9のpreview applicationで、8080ポートで起動したVueアプリ（ https://xxx.vfs.cloud9.ap-northeast-1.amazonaws.com ）から8081ポートで起動したFast API（ https://xxxx.vfs.cloud9.ap-northeast-1.amazonaws.com:8081 ）にリクエストを送った際にCORSエラーになります。
下の実装だと問題なくリクエストされました。
``` ts
axios.get("https://xxxx.vfs.cloud9.ap-northeast-1.amazonaws.com:8081/", {
  withCredentials: true,
});
```
しかし、下のようにheaderを付与するとCORSエラーになります。
``` ts
axios.get("https://xxxx.vfs.cloud9.ap-northeast-1.amazonaws.com:8081/", {
  withCredentials: true,
  headers: {  
    'X-Auth-Mailaddress': 'xxxx@example.com',
  },
});
```
headerをつけた場合、Fast APIまでリクエストが到達していないようなのでAWS側でブロックされているような気がしています。

---
リクエストを送った際のエラーメッセージはこちら。

`Access to XMLHttpRequest at 'https://xxxx.vfs.cloud9.ap-northeast-1.amazonaws.com:8081/' from origin 'https://xxxx.vfs.cloud9.ap-northeast-1.amazonaws.com' 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.
`
---
![preflightエラー](/media/postImages/original/IM1ZXghOvPQLWLCg8rbDHqcQ)
![GETエラー](/media/postImages/original/IMmTG8nJQtRcmD3EuNxeg6vA)

Accepted Answer

エラーの内容によるかもしれませんが、以下のブログのようにヘッダーを追加すれば改善しますか？  
https://qiita.com/mtoutside/items/cee708841cad7e02f85c  
https://developer.mozilla.org/ja/docs/Web/HTTP/CORS/Errors/CORSMissingAllowOrigin

後はアプリケーションログなども確認が必要かもしれません。

ヘッダーが無いときに成功するのであれば、レスポンスヘッダーでAccess-Control-Allow-Headersを設定してX-Auth-Mailaddressを許可するようにすれば成功すると思います。  
https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Access-Control-Allow-Headers

Cloud9の8080ポートで起動したVueアプリから8081ポートで起動したFast APIにリクエストを送った際にCORSエラーになる

Relevanter Inhalt