node-fetchでmode: corsが機能しない

Question

node-fetchを使い,postを行いたいのですが、どうしてもcorsでエラーが出てしまいます。mode: corsはちゃんと付けています。

import axios from "axios";
import fetch from "node-fetch";
import { User } from "types/types";

export const fetch1 = async (type = "", user: User) => {
  const params = new FormData();
  params.append("username", user["username"]);
  params.append("password", user["password"]);
  const response = await fetch(
    "https://hoge.herokuapp.com/api/works",
    {
      method: "POST",
      headers: {
        'Access-Control-Allow-Origin':'*'
      },
      body: params,
      mode: "cors",
      //credentials: "include", // cookieを付けたい場合い
    }
  );

  console.log(response)
  const json = await response.json();

  console.log(json);

}; 
//
Access to fetch at 'https://hoge.herokuapp.com/api/works' 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. 
If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Postmanを使って叩けていることは確認しています。解決策がわかる方はどうかよろしくお願いします。

Answer 1

node-fetchの説明には、以下のようにあります。

A light-weight module that brings window.fetch to Node.js

つまり、これはNode.js用です。ブラウザで使うものではありません。

Comments

[maisumakun]

そして、Node.jsのようなサーバサイドからのアクセスには、もともと「クロスオリジン制約」は存在しませんので、Node.jsがクライアントとなる通信についてCORSを考える必要は皆無です。

[2_34_koki]

と言うことはSSRする際にサーバーサイドで使えば、行けるという解釈ですか？

[maisumakun]

ブラウザサイドで行う場合は、ブラウザにあるfetchをそのまま使ってください。

[2_34_koki]

なるほど。ありがとうございます。

[maisumakun]

そして、「Access-Control-Allow-Origin」はサーバ側から与えるものですので、クライアントサイドで追加しても効果はありません（送信するサーバの側でCORSに対応してくれていなければ、CORSとしての通信は行なえません）。