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エラーになります。
下の実装だと問題なくリクエストされました。
axios.get("https://xxxx.vfs.cloud9.ap-northeast-1.amazonaws.com:8081/", {
withCredentials: true,
});
しかし、下のようにheaderを付与するとCORSエラーになります。
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.
回答ありがとうございます。 こちらリクエストヘッダーを追加しても改善しませんでした。
サーバー側には以下を実装済みなので、必要なCORS設定はされているかなと思っています。
こちらバックエンドにリクエストが到達する前に弾かれているような印象で、Cloud9でPreview Application起動時に使われているであろうALB等でブロックされているのではないかと疑っています。
GitHubのissueに同じような内容がありますが解決しているようには見えませんでした。 https://github.com/gatsbyjs/gatsby/issues/19806
以下のstackoverflowではプロキシを回避するためにパブリックIPを使ってCloud9にアクセスさせようとする回答があります。 おそらくこの方法でプロキシ自体は回避できるはずなのでCORSエラーは解決できると思います。 https://stackoverflow.com/questions/47891982/enabling-cors-in-a-cloud-9-service
他の方法だと可能かは不明ですが、localhostで通信させれば内部でのやり取りになるはずなのでエラーを回避できるのではないかと思いました。
フロントもバックエンドもdockerで立ち上げて、vite.config.tsにcontainer_nameでproxyを設定したら接続できました! 下のコメントのおかげです。 ありがとうございました。