如何修复未经授权的 axios/react 响应答案

【问题标题】：How to fix the unauthorized axios/react response如何修复未经授权的 axios/react 响应
【发布时间】：2019-09-05 19:48:16
【问题描述】：

未经授权的axios/react响应

各位朋友，我正在尝试通过 Axios 和 React 连接到 api，但出现一条错误消息，提示我无权访问，这是我的操作：

import {SHOW_PROMOTIONS} from './action-types';
import axios from 'axios';

export const showPromo = () => async dispatch =>{
    const url= 'https://payment-promotions-dev.travelit.com.ar/api/promotions/packages/';
    let config = {
        "Content-type": "application/x-www-form-urlencoded",
        "Authorization": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJtdW5kaWdlYSIsImp0aSI6ImQ0ODE1ZDk4LTJlYmQtNDRjYS04NGViLTU4N2JjNTY5NzgzZCIsImlhdCI6MTU1NTM0ODUwMCwibm9tYnJlIjoiTXVuZGlnZWEiLCJhcHBsaWNhdGlvbklkIjoiMSIsInBhaXNJZCI6IjEiLCJ0aXBvQXBsaWNhY2lvbklkIjoiMSIsImFjdGl2YSI6IlRydWUiLCJuYmYiOjE1NTUzNDg1MDAsImV4cCI6MTU1NTk1MzMwMCwiaXNzIjoiVHJhdmVsSVQiLCJhdWQiOiJUcmF2ZWxJVCJ9.o4Tv6Cw1Mj5xmHIQQ7abm6k6Ean6s6eQ3IDEkHY6Frk"
    };

    axios.get('http://<host>:<port>/<path>', url,config)
        .then((res) => {
            console.log("RESPONSE RECEIVED: ", res);
        })
        .catch((err) => {
            console.log("AXIOS ERROR: ", err);
        })

    const respuesta = await axios.get(url,config);
    dispatch({
        type: SHOW_PROMOTIONS,
        payload: respuesta.data
    })
}

当我执行组件时，出现这个错误：（见下图https://imgur.com/LuKnBv9）

令牌位于其各自的标题中，我似乎没有意识到我做错了。

我什至尝试使用 Postman 完成请求，并且通过了 200：（参见 image2 https://imgur.com/7UFksPR）

感谢大家的帮助！

【问题讨论】：

您需要添加授权令牌类型，如下所示："Authorization": "Bearer eyJhbGciO..."
@AmrAly 我尝试使用"Authorization": "Bearer eyJhbGciO... 并出现错误
您当前实际上并没有通过传递config 来设置headers。您需要在config 对象上指定headers 属性并将所需的标头放入该属性中。 const config = { headers: { "Content-type": "application/x-www-form-urlencoded", // ... } };

标签： reactjs axios

【解决方案1】：

您目前实际上并未为请求指定headers。您需要将headers 属性添加到config 对象并将所需的标头放入该属性中。此外，正如您所说的 cmets，您还需要为 Authorization 请求标头指定 type，例如 Bearer：

const config = {
  headers: {
    "Content-type": "application/x-www-form-urlencoded",
    "Authorization": "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJtdW5kaWdlYSIsImp0aSI6ImQ0ODE1ZDk4LTJlYmQtNDRjYS04NGViLTU4N2JjNTY5NzgzZCIsImlhdCI6MTU1NTM0ODUwMCwibm9tYnJlIjoiTXVuZGlnZWEiLCJhcHBsaWNhdGlvbklkIjoiMSIsInBhaXNJZCI6IjEiLCJ0aXBvQXBsaWNhY2lvbklkIjoiMSIsImFjdGl2YSI6IlRydWUiLCJuYmYiOjE1NTUzNDg1MDAsImV4cCI6MTU1NTk1MzMwMCwiaXNzIjoiVHJhdmVsSVQiLCJhdWQiOiJUcmF2ZWxJVCJ9.o4Tv6Cw1Mj5xmHIQQ7abm6k6Ean6s6eQ3IDEkHY6Frk"
  }
};

希望对您有所帮助！

【讨论】：

嗨，亚历克斯！我按照您的建议指定了标题。现在会发生这种情况：imgur.com/kAStN6q 我应该检查其他内容吗？
这是朝着正确方向迈出的一步。听起来这个答案有助于推动它向前发展。这将是关于 CORS 的不同错误。根据您的服务器平台，有很多关于启用/配置 CORS 的问题和答案。 enable-cors.org
我非常感谢您的帮助 Alex。谢谢！如果需要，我会发布另一个问题，另外，我会查看你给我的链接，你帮我找到了方法：D