React JSの認証ヘッダーをクロスドメインノード（Express）APIに送信

Question

私はこのCORSの問題を初めて抱えており、何が間違っているのか苦労しています。

は、私は2つのアプリケーションがありますアプリは、ノードAPIが反応アプリ側でhttp://localhost:4000/

上でホストhttp://localhost:3000/

上でホストされている反応

• を、Iは、Authorizationヘッダを通過しようとしてい

  fetch('http://localhost:4000/api/address/add', { 
      method: 'POST', 
      headers: { 
      'Content-Type': 'application/x-www-form-urlencoded', 
      'Authorization': 'bearer ' + Auth.getToken(), 
      }, 
      credentials: "include", 
      body: JSON.stringify({ 
      data: "someData" 
      }) 
  }) 
  

  しかし、彼は私がノード（表現）API側で受信req.headers、以下である：Authorizationヘッダーが欠落し、そのように、私の認証が失敗し、APIが動作しませんされて

  { host: 'localhost:4000', 
      connection: 'keep-alive', 
      'content-length': '22', 
      origin: 'http://localhost:3000', 
      'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Safari/537.36', 
      'content-type': 'application/x-www-form-urlencoded', 
      accept: '*/*', 
      referer: 'http://localhost:3000/?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiI1OTg5ODg1ZTM3YjVkYjBiODA5ZDNjN2QiLCJpYXQiOjE1MDIxODgxNTF9.5DLCAplQLN4IQcnbU1ldh5N2_Lr_7R6bCScsLdWDNE4', 
      'accept-encoding': 'gzip, deflate, br', 
      'accept-language': 'en-US,en;q=0.8', 
      cookie: 'userid=By6Du-xf-; io=8TchJYAr6cHgAmnAAAAB' } 
  

  。

  私には何が欠けていますか？

  編集： ルートハンドラ：

  //address.js 
  const express = require('express'); 
  const router = express.Router(); 
  const Address = require('mongoose').model('Address'); 
  
  router.get('/', (req, res, next) => { 
      return Address.find({ userId : req.userId}, (userErr, addresses) => { 
      if (userErr || !addresses) { 
       return res.status(401).end(); 
      } 
  
      return res.status(200).json({ 
       success: true, 
       addresses: addresses 
      }); 
      }); 
  }) 
  
  
  router.post('/add', (req, res, next) => { 
      console.log("got here!") 
      const addressData = { 
      userId: req.userId, 
      address: req.body.address.trim() 
      }; 
  
      const newAddress = new Address(addressData); 
  
      newAddress.save((err) => { 
      if (err) { return res.status(401).end(); } 
  
      return res.status(200).json({ 
       success: true, 
       message: "Successfully added address." 
      }); 
      }); 
  }) 
  
  module.exports = router; 
  

  その後、私のインデックスルートファイル：

  //routes.js 
  const express = require('express'); 
  const router = express.Router(); 
  
  const authCheckMiddleware = require('../../middleware/auth-check'); 
  router.use(authCheckMiddleware); 
  
  router.use('/address/', require('./address')); 
  

Answer 1

ここでは私のために働いているコードです：

//react-app 

fetch('http://localhost:4000/api/address/add', { 
    method: 'POST', 
    headers: { 
    'Content-Type': 'application/x-www-form-urlencoded', 
    'Authorization': 'bearer ' + Auth.getToken(), 
    }, 
    body: JSON.stringify({ 
    address: this.refs.address.value, 
    }) 
}) 
.then(function(res) { 
    console.log(res) 
}) 

とCORS config：server.jsファイル：

不正な形式のJSONをデコードするための

var express = require('express') 
var cors = require('cors') 
var app = express() 
app.use(cors()) 

ボーナス：

//route.js 
router.use(fixReactJSONBug); 

router.use('/address/', require('./address')); 
module.exports = router; 

function fixReactJSONBug(req, res, next) { 
    if (Object.keys(req.body).length > 0) { 
    req.body = JSON.parse(Object.keys(req.body)[0]) 
    } 

    return next(); 
}