質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Heroku

HerokuはHeroku社が開発と運営を行っているPaaSの名称です。RubyやNode.js、Python、そしてJVMベース(Java、Scala、Clojureなど)の複数のプログラミング言語をサポートしている。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

POST

POSTはHTTPプロトコルのリクエストメソッドです。ファイルをアップロードしたときや入力フォームが送信されたときなど、クライアントがデータをサーバに送る際に利用されます。

CORS

CORSとはCross-Origin Resource Sharingの頭文字をとったもので、ブラウザがオリジン以外のサーバからデータを取得するシステムのことです。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

解決済

1回答

1039閲覧

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

moimoi_sushi

総合スコア26

Heroku

HerokuはHeroku社が開発と運営を行っているPaaSの名称です。RubyやNode.js、Python、そしてJVMベース(Java、Scala、Clojureなど)の複数のプログラミング言語をサポートしている。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

POST

POSTはHTTPプロトコルのリクエストメソッドです。ファイルをアップロードしたときや入力フォームが送信されたときなど、クライアントがデータをサーバに送る際に利用されます。

CORS

CORSとはCross-Origin Resource Sharingの頭文字をとったもので、ブラウザがオリジン以外のサーバからデータを取得するシステムのことです。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

0グッド

0クリップ

投稿2020/05/21 14:30

編集2020/05/21 14:33

前提・実現したいこと

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() { //ステータス1のあとに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も同様に何も返ってきません。

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

JavaScript

1xhr.withCredentials = true;

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

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

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

投稿2020/05/22 02:46

ockeghem

総合スコア11701

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

moimoi_sushi

2020/05/26 06:41

xhr.withCredentials = true;について調べることを後回しにしてお返事遅くなりました。すみませんでした。 ひとまずxhr.withCredentials = true;を外すことで通すことができたのでエラーの原因もそこにありました。 CORSの基礎について学習して理解しながらやり取りできるようになります。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問