【Nuxt.js】フォームを送信したらstatus code405が返ってきた

フォームを送信したらstatus code405が返ってきた時の対処メモ

エラー文

xhr.js?b50d:172 OPTIONS http://localhost:1323/v1/forms 405 (Method Not Allowed)

→ 意味：405 サーバーがリクエストメソッドを理解しているものの、無効にされており使用することができない

input:1 Access to XMLHttpRequest at 'http://localhost:1323/v1/forms' from origin 'http://localhost:3000' 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.

→ 翻訳：
オリジン 'http：// localhost：3000'から 'http：// localhost：1323 / v1 / forms'にあるXMLHttpRequestへのアクセスはCORSポリシーによってブロックされています：プリフライトリクエストへの応答はアクセスコントロールチェックに合格しません：いいえ 'アクセス-Control-Allow-Origin 'ヘッダーが要求されたリソースに存在します。

apiとnuxt-appのつなぎ込みを忘れてたので修正

• docker-compose.yamlにnetworksの設定を追加

api/docker-compose.yaml

services: 
    // 省略

    networks: 
      - internal 
      - external 

  db: 
    // 省略

    networks: 
      - internal 

networks:
  internal:
    internal: true
  external:
    name: api_network

→ それでもエラーは治らない

env.development.jsのurlの記載を修正

env.development.js

module.exports = {
  apiBaseUrl: "http://app:1323/"    // もともと"http://localhost:1323/"としていた
}
}

→ エラー解消