Javascript 未捕获（承诺中）语法错误：JSON中位于位置0的意外标记e

目前，我正在尝试将GoogleAuth添加到React应用程序中。我能够获取信息并将其发送到后端（RoR），一次在后面，我将令牌发送回我的React前端，但我不断得到：

Uncaught（in promise）SyntaxError:JSON中的意外令牌e位于位置0

。我已经在这上面呆了一段时间了，运气不好。也许你们可以帮忙

我尝试使用

Fetch

和

Axios

发出ajax请求。我尝试过用不同的方式编写ajax请求，但没有成功。我发现类似的文章有一个类似的错误：

Uncaught（in promise）SyntaxError:Unexpected token<在JSON中的位置0

，但是我检查了我的网络选项卡，我正确地返回了JSON，所以我真的不明白问题是什么

以下是获取代码段：

googleResponse = async (info) => {
const data = {
    first_name: info.w3.ofa,
    last_name: info.w3.wea,
    email: info.w3.U3,
    picture: info.w3.Paa,
    access_token: info.accessToken
}

const headers = new Headers()
headers.append('Content-Type', 'application/json')
const options = {
    method: 'POST',
    body: JSON.stringify(data),
    headers
}
const response = await fetch('http://localhost:4000/auth', options)
const returnedData = await response.json()
returnedData.then(r => console.log(r)) // -> Uncaught (in promise) SyntaxError: Unexpected token e in JSON at position 0
};

这是我的网络选项卡：

我会继续寻找，但如果有人看到我做错了什么，我会帮上大忙

反应代码：

import React, { Component } from 'react';
import { GoogleLogin } from 'react-google-login';
import config from './config.json';

class App extends Component {

constructor() {
    super();
    this.state = { isAuthenticated: false, user: null, token:''};
}

logout = () => {
    this.setState({isAuthenticated: false, token: '', user: null})
};
onFailure = (error) => {
  alert(error);
};

googleResponse = async (info) => {
    const data = {
        first_name: info.w3.ofa,
        last_name: info.w3.wea,
        email: info.w3.U3,
        picture: info.w3.Paa,
        access_token: info.accessToken
    }

    const headers = new Headers()
    headers.append('Content-Type', 'application/json')
    const options = {
        method: 'POST',
        body: JSON.stringify(data),
        headers
    }
    const response = await fetch('http://localhost:4000/auth', options)
    const returnedData = await response.json()
    returnedData.then(r => console.log(r)) // -> Uncaught (in promise) SyntaxError: Unexpected token e in JSON at position 0
};

render() {
    let content = !!this.state.isAuthenticated ?
        (
            <div>
                <p>Authenticated</p>
                <div>
                    {this.state.user.email}
                </div>
                <div>
                    <button onClick={this.logout} className="button">
                        Log out
                    </button>
                </div>
            </div>
        ) :
        (
            <div>
                <GoogleLogin
                    clientId={config.GOOGLE_CLIENT_ID}
                    buttonText="Login"
                    onSuccess={this.googleResponse}
                    onFailure={this.onFailure}
                />
            </div>
        );

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

export default App;

import React，{Component}来自'React'；
从'react google login'导入{GoogleLogin}；
从“/config.json”导入配置；
类应用程序扩展组件{
构造函数（）{
超级（）；
this.state={isAuthenticated:false，user:null，令牌：''}；
}
注销=（）=>{
this.setState（{isAuthenticated:false，令牌：“”，用户：null}）
};
onFailure=（错误）=>{
警报（错误）；
};
谷歌响应=异步（信息）=>{
常数数据={
名字：info.w3.ofa，
姓氏：info.w3.wea，
电子邮件：info.w3.U3，
图片：info.w3.Paa，
访问令牌：info.accessToken
}
const headers=new headers（）
headers.append（'Content-Type'，'application/json'）
常量选项={
方法：“POST”，
正文：JSON.stringify（数据），
标题
}
const response=等待获取（'http://localhost:4000/auth，选项）
const returnedData=wait response.json（）
returnedData.then（r=>console.log（r））/->Uncaught（在promise中）语法错误：JSON中的意外标记e位于位置0
};
render（）{
让内容=！！this.state.isAuthenticated？
(
认证

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

RoR代码：

class UsersController < ApplicationController
protect_from_forgery with: :null_session
def auth
    secret = 'pineapple'
    @token = JWT.encode params["data"], secret, 'HS256'
    render json: @token
end
end

class UsersController

您应该发布返回的json，因为这是产生错误的原因。我不认为您在控制台中收到的错误消息是then语句中的console.log。尝试将.catch链接到.then语句中，并记录错误。如果在位置0处存在

'e'

，则它显然是无效的json。请查看浏览器开发工具网络中的实际响应主体，并查看其内容there@charlietfl你说得对，我在轨道上犯了一个小错误。而不是

render json:{toke:@token}

我做了

render json:@token

。哇！