Javascript React google登录不适用于axios

我在前端使用google实现身份验证，它向后端发送一个访问令牌，后端检查令牌，如果令牌有效，它将返回一个令牌，允许访问受保护的资源

我遵循了这一点，我已经实现了一切，而且效果很好。问题在于将请求发送到后端的级别，fetch一切都很好，但是如果我尝试实现axios，服务器会发送响应

用fetch

const googleResponse = (response) => {
        const tokenBlob = new Blob([
            JSON.stringify({
                access_token: response.accessToken
            }, null, 2)
        ], {type : 'application/json'});
        const options = {
            method: 'POST',
            body: tokenBlob,

        };

        fetch('http://localhost:8000/api/auth/google/login', options).then(r => {
            const token = r.headers;
            r.json().then(user => {
                if (token) {
                    setData({
                        //...data, isAuthenticated: true, user: user, token: token
                        ...data, isAuthenticated: true, user: user, token: token
                    })
                }
            });
        })
    };

用axios

    const responseGoogle = (response) => {
        const tokenBlob = new Blob([
            JSON.stringify({
                access_token: response.accessToken
            }, null, 2)
        ]);

        axios.post('http://localhost:8000/api/auth/google/login', tokenBlob)
            .then(response => {
                const token = response.headers;
                if (token){
                    setData({
                        ...data, token: token, isAuthenticated: true
                    })
                }
            })
    };

完整代码

import React, {useState} from "react";
import {config} from "./config";
import {GoogleLogin, GoogleLogout} from 'react-google-login';
import axios from 'axios';

const App = () => {
    const [data, setData] = useState({
        isAuthenticated : false,
        token : '',
        user : null
    })
    const {isAuthenticated, user} = data;


    const logout = () => {
        setData({
            ...data, token: "", user: null, isAuthenticated: false
        })
    };

    const onFailure = (error) => {
        alert(error);
    };


    const googleResponse = (response) => {
        const tokenBlob = new Blob([
            JSON.stringify({
                access_token: response.accessToken
            }, null, 2)
        ], {type : 'application/json'});
        const options = {
            method: 'POST',
            body: tokenBlob,

        };

        fetch('http://localhost:8000/api/auth/google/login', options).then(r => {
            const token = r.headers;
            r.json().then(user => {
                if (token) {
                    setData({
                        //...data, isAuthenticated: true, user: user, token: token
                        ...data, isAuthenticated: true, user: user, token: token
                    })
                }
            });
        })
    };

    let content = !! isAuthenticated ?
        (
            <div>
                <p>Authenticated</p>
                <div>
                    {user && user.email}
                </div>
                <div>
                    <GoogleLogout clientId={config.GOOGLE_CLIENT_ID}
                                  buttonText="Logout"
                                  onLogoutSuccess={logout}
                    />
                </div>
            </div>
        ) :
        (
            <div>
                <GoogleLogin
                    clientId={config.GOOGLE_CLIENT_ID}
                    buttonText="Login"
                    onSuccess={googleResponse}
                    onFailure={onFailure}
                    isSignedIn
                />

            </div>
        );

    return (
        <div className="App">
            {content}
        </div>
    );
}

export default App;

import React，{useState}来自“React”；
从“/config”导入{config}；
从'react google login'导入{GoogleLogin，GoogleLogout}；
从“axios”导入axios；
常量应用=（）=>{
const[data，setData]=useState({
I认证：错误，
令牌：“”，
用户：空
})
const{isAuthenticated，user}=数据；
常量注销=（）=>{
设置数据({
…数据，令牌：“”，用户：null，已验证：false
})
};
const onFailure=（错误）=>{
警报（错误）；
};
const googleResponse=（响应）=>{
const tokenBlob=新Blob([
JSON.stringify({
访问令牌：response.accessToken
}，null，2）
]，{type:'application/json'}）；
常量选项={
方法：“POST”，
正文：tokenBlob，
};
取（'http://localhost:8000/api/auth/google/login，选项）。然后（r=>{
const-token=r.headers；
r、 json（）。然后（用户=>{
如果（令牌）{
设置数据({
//…数据，已验证：真，用户：用户，令牌：令牌
…数据，已验证：真，用户：用户，令牌：令牌
})
}
});
})
};
让内容=！！是否已验证？
(
认证

{user&&user.email}
) :
(
);
返回(
{content}
);
}
导出默认应用程序；

在fetch调用中，您包括

{type:'application/json'}

，但不包括axios调用的配置头

请尝试包括应用程序类型配置：

const responseGoogle = (response) => {

  let tokenBlob = new Blob([
    JSON.stringify({
        access_token: response.accessToken
    }, null, 2)
  ]);

  let config = {
    headers: {
      'Content-Type': 'application/json'
    }
  };

  // The call takes the URl, the body (your stringified blob), and the headers config
  axios.post('http://localhost:8000/api/auth/google/login', tokenBlob, config)
      .then(response => {
          const token = response.headers;
          if (token){
              setData({
                  ...data, token: token, isAuthenticated: true
              });
          }
      });
};

---

在fetch调用中，包括

{type:'application/json'}

，但不包括axios调用的配置头

请尝试包括应用程序类型配置：

const responseGoogle = (response) => {

  let tokenBlob = new Blob([
    JSON.stringify({
        access_token: response.accessToken
    }, null, 2)
  ]);

  let config = {
    headers: {
      'Content-Type': 'application/json'
    }
  };

  // The call takes the URl, the body (your stringified blob), and the headers config
  axios.post('http://localhost:8000/api/auth/google/login', tokenBlob, config)
      .then(response => {
          const token = response.headers;
          if (token){
              setData({
                  ...data, token: token, isAuthenticated: true
              });
          }
      });
};

---

我已经找到了解决办法，我只是不得不这么做

    const responseGoogle = (response) => {
        const access_token = response.accessToken;
        const tokenSend = {access_token}

        axios.post('http://localhost:8000/api/auth/google/login', tokenSend)
            .then(response => {
                const token = response.headers;
                    setData({
                        ...data, token: token, isAuthenticated: true, user: response.data
                    })
            })
    };

---

我已经找到了解决办法，我只是不得不这么做

    const responseGoogle = (response) => {
        const access_token = response.accessToken;
        const tokenSend = {access_token}

        axios.post('http://localhost:8000/api/auth/google/login', tokenSend)
            .then(response => {
                const token = response.headers;
                    setData({
                        ...data, token: token, isAuthenticated: true, user: response.data
                    })
            })
    };