javascript - Fetch 和 Axios 的区别

Question

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

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

(client -->(login fbsdk)--> fb --> (access token)--> client -->(pass access token)--> nodejs api --> (get credentials) --> passport-fb-token --> (send credentials) --> nodejs api --> (credentials)--> client)

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 配置为在一个中心位置使用您的 token 。例如

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