Express.jsとHerokuで立てたAPIを叩きたいがCORS対策がうまくいかずPOSTできない

Question

前提・実現したいこと

Express.jsの方で用意したRouteとやり取りしたいです。

発生している問題・エラーメッセージ

CORS対策としてAPI側はAccess-Control-Allowの設定を行いましたがクライアント側からPOSTしてもnullが返ってきます。
API側のソース、そしてクライアント側のソースを載せました。

**Express.js + HerokuのAPI側**
const express = require("express"),
  app = express(),
  bodyParser = require('body-parser').json();

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  res.header('Access-Control-Allow-Methods', 'GET, POST');
  next();
});

app.set("port", process.env.PORT || 5000)

app.get("/", (req, res) => {
    res.send("Hello, Universe!");
})

//やり取りしたいRoute
app.post("/test", bodyParser, (req, res) => {
  console.log(req.body);
  res.status(200).send(req.body);
})
app.listen(app.get("port"), () => {
    console.log(`The Express.js server has started and is listening on port number: ${app.get("port")}`);
  });

**javascript クライアントサイド**
//(殆どpostmanのコードをコピペしています。)
const data = JSON.stringify({"test":"hi"}),
  xhr = new XMLHttpRequest(),
  dom = document.getElementById('dom');
  
xhr.withCredentials = true;

const postJSON = () => {
  xhr.addEventListener("readystatechange", function() {
   //ステータス１のあとに4が返ってきます。
    console.log(this.readyState);
    
    if(this.readyState === 4) {
      //中身はnullです。
      console.log(this.responseText);
    }
  });
  xhr.open("POST", "https://obscure-hogehoge.herokuapp.com/test");
  xhr.setRequestHeader("Authoraization", "Bearer 6e7bf393-hogehogehoge");
  xhr.setRequestHeader("Content-Type", "application/json");
  xhr.send(data);
}

dom.addEventListener('click', postJSON);

試したこと

1. Postmanを使ってAPI側からJSONが返ってくることは確認しました。
2. corsのnpmパッケージを使ったやり方でやってみてもクライアントから投げた後にメッセージが返ってきません。
3. Express側をlocalhostで立ててやりましたがそちらでも上手くいきませんでした。
4. GETも同様に何も返ってきません。

ここに問題に対して試したことを記載してください。

Answer 1

デベロッパーツールを使って、ブラウザ側で表示されているエラー示してください。
さしあたり分かることは、クライアント側で以下を設定していますが、

xhr.withCredentials = true;

この場合、以下の二点が必要です。

• Access-Control-Allow-Originは "*" ではだめでオリジン（https://example.jp など）を明示する
• サーバー側で Access-Control-Allow-Credentials: true を返す

これはCORSの基礎のところですから、まず理解してください。

Comments

[moimoi_sushi]

xhr.withCredentials = true;について調べることを後回しにしてお返事遅くなりました。すみませんでした。

ひとまずxhr.withCredentials = true;を外すことで通すことができたのでエラーの原因もそこにありました。
CORSの基礎について学習して理解しながらやり取りできるようになります。