【Nuxtで回避】Access to XMLHttpRequest at ‘url’ from origin ‘localhost:3000’ has been blocked by CORS policy【node.jsのエラー】

フロントからサーバーにアクセスしたときのエラーです。node.jsのエラーもまとめておきます。

【Nuxtで回避】Access to XMLHttpRequest at ‘url’ from origin ‘localhost:3000’ has been blocked by CORS policy

Access to XMLHttpRequest at ‘http://pc-name:3000/api/’ from origin ‘http://localhost:3000’ has been blocked by CORS policy

Access to XMLHttpRequest at 'http://pc-name:3000/api/' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
index.vue:94 error Error: Network Error
    at createError (createError.js:16)
    at XMLHttpRequest.handleError (xhr.js:83)
xhr.js:178 GET http://pc-name:3000/api/ net::ERR_FAILED

違うサイトにドメインのリクエストを送った場合にでるエラー。
CORS(Cross-Origin Resource Sharing )とは、異なるドメインでjavascriptのXMLHttpRequestやfetchなどのAJAX通信をする際にセキュリティ的に安全にやりとりができるよう定められた規約。オリジン (origin)とはこういうアドレス。https://localhost.co.jp:3300ドメインと違って最後にポートナンバーがつきます。分解すると、origin = protocol + domain + port number。

nuxtはproxyで回避

この問題はいろいろな解決方法が紹介されています。

フロントエンドとバックエンドを同じポート番号にしたら通ったときがあった気がするのですが、、、後日エラーがでていました。

またサーバー側のポートをフロントと一緒にすると、npm run devしたとき、フロント側のポート番号が重複していると判断されて勝手に変わるようです。この場合、接続がうまくいきません。

nuxtの場合、proxyを設定するのがよいようです。proxyのtargetとサーバーを一緒にして、フロントのポート番号を変えることにより回避しました。

targetにサーバー側のport番号を入れます。

  proxy: {
    '/api': {
      target: 'http://localhost:5000/',
      pathRewrite: {
        '^/api': '/'
      }
    }
  },

node.jsのexpressで繋ぐ場合です。firebase cloud functionsを利用しています。

const server = app.listen(5000, 'localhost', () => {
  const host = server.address().address
  const port = server.address().port
  console.log('App listening at http://%s:%s', host, port)
})

これでpackage.jsonで好きなポート番号が使えます。またフロントとサーバーのやりとりもうまくいきます。

"scripts": {
  "dev": "nuxt --port 3300",
}

ブラウザのエラー

500 (RuntimeError)

GET http://localhost:3330/api/twlogin?twitterId=xxx 500 (RuntimeError)

ログイン時のエラーですがサーバーサイドのエラーです。firebaseの有効期限などを疑ってみましょう。

またはローカルサーバーの場合、サーバーの起動し忘れやポート番号が合致していない可能性があります。

Nuxtの場合、ポート番号はfunctions/index.jsとpackage.jsonの”dev”: “nuxt –port 3330”,を見てみましょう。ただ、合致させると別のエラーがでるため上記のようにproxy設定で回避するのが無難そうです。

このエラーの状態のままデプロイしてデプロイしたUrlで確認すると、ログイン時に次のエラーになるようです。

net::ERR_CONNECTION_REFUSED

node.jsのエラー

throw er; // Unhandled ‘error’ event

throw er; // Unhandled 'error' event

ローカルサーバーの二重起動ですかね…。

ローカルサーバーを停止させましょう。

# port3300を利用してるプロセスの調査
lsof -i :3300

3300はポート番号です。このコマンドを入力すると、PIDの情報が表示されるためPIDをいれて停止させます。

kill -QUIT (pidの番号)

Error: listen EADDRINUSE: address already in use

lsof -i :3300
kill -9 (pidの番号)
node functions/index.js

-9は強制終了

nuxt.configとポート番号がかぶるとでる気がします。。根本的な解決方法としては、proxyを使って回避しましょう。

Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client

Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client

headersを再設定できないエラーです。return忘れが原因です。

return res.status(200).send()

Deployment error. Function failed on loading user code. This is likely due to a bug in the user code. Error message: Error: please examine your function logs to see the error cause

Deployment error. Function failed on loading user code. This is likely due to a bug in the user code. Error message: Error: please examine your function logs to see the error cause

ドキュメントみてね、と言っているだけなのであんま参考になりません。firebaseのfunctionsのログを追った方がよい。Ctrl+Fでerrorと検索するとよい。

今回は

Error: Cannot find module dotenv

をみつけた。メインにはインストールしてあったけど、functionsには入っていませんでした。npm installでいれたらあっさりと改善されました。

npm install dotenv --save

これに限らず、このエラーのときはfunctionnsの方に何かがインストールされていない場合が多いです。サーバーに何か移動していないか、何か新規で追加していないかを確認しましょう。

[HPM] Error occurred while trying to proxy request xxx from xxx to http://localhost:3000/ (ECONNREFUSED)(https://nodejs.org/api/errors.html#errors_common_system_errors)

[HPM] Error occurred while trying to proxy request xxx from xxx to http://localhost:3000/ (ECONNREFUSED)(https://nodejs.org/api/errors.html#errors_common_system_errors)

このエラーはnuxt.config.jsのtargetのアドレスを変えることにより回避できるようです。

  proxy: {
    '/api': {
      // target: 'http://localhost:3000/',
      target: 'localhost',
      pathRewrite: {
        '^/api': '/'
      }
    }
  }

throw new TypeError(‘Router.use() requires a middleware function but got a ‘ + gettype(fn))

throw new TypeError('Router.use() requires a middleware function but got a ' + gettype(fn))

書き忘れですかね。

module.exports = router

DeprecationWarning: Use of deprecated folder mapping

ビルドはとおるが、ビルド時に表示されるエラー。詳しくは調べていないが、nodeのバージョンを16から15に戻したら消えた。

ERROR  (node:6587) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /path/node_modules/@nuxt/components/package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)

node functions/index.js(デバッグ環境)

node.jsの起動方法です。expressを利用しています。

デプロイするなら次のコードはいりませんが、ローカル環境で検証するなら次のコードが必要です。

const server = app.listen(3300, '127.0.0.1', () => {
  const host = server.address().address
  const port = server.address().port
  console.log('App listening at http://%s:%s', host, port)
})

実行する命令は次のものになります。

node path/app.js

cloud functionの場合は次のような命令になります。cloud functionはいちいちデプロイすると時間がかかるため、ローカル環境で実行しましょう。console.logも表示されます。

node functions/index.js

cloud function以外の場合は次のようになりますかね。

node server/app.js

個人的にserverというフォルダをよく作るため。