Question

有人可以向我解释为什么当我使用fetch并访问我的nodejs api时-它是被授权的，但是当我尝试使用axios来访问我的api-它是未经授权的。

这是我正在获取中使用的代码（它来自教程：https://medium.com/@alexanderleon/implement-social-authentication-with-react-restful-api-9b44f4714fa），因为我正在研究他使用passport-facebook-token进行身份验证的方式。

（客户端->（登录fbsdk）-> fb->（访问令牌）->客户端->（通过访问令牌）-> nodejs api->（获取凭据）->护照fb令牌->（发送凭据）-> nodejs api->（凭据）->客户端）

const tokenBlob = new Blob([JSON.stringify({access_token: response.accessToken}, null, 2)], {type : 'application/json'});
    const options = {
        method: 'POST',
        body: tokenBlob,
        mode: 'cors',
        cache: 'default'
    };
    fetch('http://localhost:4000/api/v1/auth/facebook', options).then(r => {
        const token = r.headers.get('x-auth-token');
        r.json().then(user => {
            if (token) {
                this.setState({isAuthenticated: true, user, token})
            }
        });
    })

这是我的axios的代码

axios({
      method: 'post',
      url: 'http://localhost:4000/api/v1/auth/facebook',
      headers: {
        'Access-Control-Allow-Origin': '*',
      },
      data: {
        access_token: response.access_token
      }
  })
  .then((res) => console.log(res))
  .catch((err) => console.log(err));

Answer 1

您应该将axios配置为在一个中央位置使用令牌。例如

export const configureAxios = (token) => {
    axios.interceptors.request.use(req => {
        // don't give our token to non-our servers
        if (isDomesticRequest(req.url)) {
            req.headers.Authorization = `Bearer ${token}`;
        }
        return req;
    });
}

Answer 2

此博客应该可以帮助您详细了解答案：

Fetch vs. Axios.js for making http requests

Axios是一个Javascript库，用于从node.js发出http请求   或来自浏览器的XMLHttpRequests，它支持Promise API   这是JS ES6固有的。它具有.fetch（）的另一个功能是   它执行JSON数据的自动转换。

如果使用.fetch（），则处理JSON时需要执行两个步骤   数据。第一个是发出实际的请求，然后第二个是   在响应上调用.json（）方法。

.fetch（）方法是朝着正确方向迈出的重要一步   http请求在ES6中是本机的，但是只知道如果在其中使用它   是一些可能由第三方更好处理的陷阱   像Axios这样的库。

Fetch和Axios之间的区别

2 个答案: