axios自动调谐头/CORS错误

Question

我正在使用与axios的反应来获取一些信息。我正在向授权用户发送JWT令牌，并在控制台浏览器中获得响应

“访问位于的XMLHttpRequest”https://beer-tonight.herokuapp.com/beer/getBeerStatus“起源”http://localhost:3000'已被CORS策略阻止：飞行前响应中的访问控制允许标头不允许请求标头字段授权。“

这是我的代码：

componentWillMount(){

    let token = localStorage.getItem('token');


    axios.get('https://beer-tonight.herokuapp.com/beer/getBeerStatus', {headers: {Authorization : 'Bearer ' + token}}).then(
    result => {
        console.log('yey');
    });
}

错误：

当我使用邮递员时，我得到了正确的答案。

邮递员输入：

p、 我已经补充说：

app.use((req, res,next)=>{
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PATCH, DELETE');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorisation');
next();

Answer 1

我相信您收到的cors错误来自您的node.jsapi。（https://beer-tonight.herokuapp.com/beer/getBeerStatus）

由于主机不相同（beer.herokuapp.com与localhost不匹配），因此需要为node.js服务器启用cors。

如果您使用Express：

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors());

// ...

资料来源：这里

Hapi.js：

server.connection({ routes: { cors: true } })

资料来源：这里

一旦启用了CORS，一切都会顺利进行。更多关于CORS的信息

Answer 2

您已经编写了授权：

res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorisation');

但是标题是授权，正如您在axios中使用的那样，请尝试更改它，然后看看它是否有效，