从React JS发送身份验证头到跨域节点（Express）API

我对这个CORS问题很陌生，并且正在努力解决哪些问题。从React JS发送身份验证头到跨域节点（Express）API

我有两个应用：

应用程序托管在http://localhost:3000/
一个节点API托管在http://localhost:4000/

在反应应用侧的反应，我想传递一个授权头与令牌一样：

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" 
    }) 
})

但t他req.headers我收到的节点（快递）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' }

一个缺少认证头正因为如此，我的身份验证失败，API不起作用。

我错过了什么？

编辑：路由处理：

//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'));

来源

2017-08-08 Jack Robson

这可能是因为你发送一个自定义HTTP标头（授权在这种情况下），这将导致预检OPTIONS请求到您的节点服务器。请在您的问题中包括您的CORS配置以及您的路由处理程序。 –

我已经添加了我得到的路线，不知道CORS配置的含义。你可以解释吗？ –

在完成CORS配置之后，管理它到达底部，谢谢VF_！ :) –

这里是为我工作的代码：

//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在server.js文件中配置：

名

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

奖金为畸形的JSON解码：

//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(); 
}

来源

2017-08-08 13:08:44

从React JS发送身份验证头到跨域节点（Express）API

回答

相关问题