node.js（express）でサーバーサイドを記述し、herokuに上げていたのですが、今まではすんなりと解消できていたcorsのエラーに嵌ってしまったので、記事を書くことにしました。
環境
- heroku: 7.42.5
- node.js: 12.16.2
- express: 4.17.1
- cors: 2.8.5
基本的な対応方法
今回はサーバーサイドとフロントエンドを異なるレポジトリに書いているため、フロントエンドからfetch等でサーバーサイドのAPIを呼ぶ際には、corsのエラーが生じてしまいます。
Access to fetch at 'https://xxx.com' from origin 'https://yyy.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
基本的にはnpm install corsをして、
const express = require('express')
const cors = require('cors')
const app = express()
app.use(cors())
と書けば解決します。
注意点① - credentialsをtrueにする場合
ただ、credentialsをtrueとしたい場合には、originを具体的に指定する必要があります。
const express = require('express')
const cors = require("cors");
const app = express();
const corsOption = {
origin: [
"http://xxx.com",
"https://yyy.com",
],
credentials: true,
};
app.use(cors(corsOption));
というようにします。
originは、1つの場合は配列なしの文字列でも大丈夫で、1つにしろ複数にしろ正規表現を用いることもできます。
ここまでは、ぐぐると色々な解説が出てくると思うのですが、今回はさらに二重に嵌ってしまっていました。
注意点② - 最後の"/"
1つめは、originの最後に"/"を入れてしまっていたことです。
本来は"http://xxx.com"としなければいけないところを、アドレスバーからコピペするなどして、"http://xxx.com/"としてしまうと、エラーが生じます。
注意点③ - herokuのconfig varsが登録されていない
2つめは、herokuのconfig varsが登録されていなかったということです。
かなり初歩的なミスなのですが、例えば、process.env.TEST_KEYみたいなコードを書いていたとして、ローカルでは.envの変数を参照していたとします。
当然、herokuではconfig varsにTEST_KEYを登録しなければいけないのですが、必要なキーなどを参照できなかった場合も、corsのエラー同様のメッセージが表示されてしまうため、数時間を無駄にしてしまいました。
皆様もお気をつけください。