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

0

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.

preflightエラー GETエラー

rei
質問済み 4ヶ月前420ビュー
1回答
0
承認された回答

エラーの内容によるかもしれませんが、以下のブログのようにヘッダーを追加すれば改善しますか?
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

profile picture
エキスパート
回答済み 4ヶ月前
  • 回答ありがとうございます。 こちらリクエストヘッダーを追加しても改善しませんでした。

    サーバー側には以下を実装済みなので、必要なCORS設定はされているかなと思っています。

    from fastapi.middleware.cors import CORSMiddleware
    app = FastAPI()
    app.add_middleware(
        CORSMiddleware,
        allow_origins=["*"],
        allow_credentials=True,
        allow_methods=["*"],
        allow_headers=["*"],
    )

    こちらバックエンドにリクエストが到達する前に弾かれているような印象で、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を設定したら接続できました! 下のコメントのおかげです。 ありがとうございました。

    他の方法だと可能かは不明ですが、localhostで通信させれば内部でのやり取りになるはずなのでエラーを回避できるのではないかと思いました。

ログインしていません。 ログイン 回答を投稿する。

優れた回答とは、質問に明確に答え、建設的なフィードバックを提供し、質問者の専門分野におけるスキルの向上を促すものです。

質問に答えるためのガイドライン