Question

我在获取功能上遇到以下问题：反应代码：

 componentDidMount() {
    this.userService.getLoggedInUser()
        .then(user => {
            this.setState({user: user});
            console.log(this.state.user);
    })
}

此课程服务文件代码：

getLoggedInUser(){
    const USER_API_URL = API_URL + "/api/profile";
    return fetch(USER_API_URL, {
        headers : {
            'Content-Type' : 'application/json'
        },
        method : "POST"
    }).then(response => response.clone()).then(data => {
        console.log(data);
        return data;
    }).catch(function (err) {
        console.log(err)
    });
}

我只是想从服务器获取登录用户。在使用邮递员进行相同操作的同时，我得到了预期的输出。服务器代码：

@PostMapping("/api/loggedInUser")
public Faculty getLoggedInUser(HttpSession session){
    return (Faculty)session.getAttribute("currentUser");
}

服务器中的类定义为：

@RestController
@CrossOrigin(origins = "http://localhost:3000", allowCredentials ="true")
public class UserService {

在邮递员中，我得到以下输出：

{
"id": 100,
"username": "bird",
"password": "bird",
"firstName": "Alice",
"lastName": "Kathie"
}

但是在react应用中，我进入的控制台是：

Response {type: "cors", url: "http://localhost:8080/api/profile", redirected: false, status: 200, ok: true, …}

但是没有要返回或解析的数据主体。我不确定我在做什么错。我尝试将提取中的then方法更改为各种类型，例如response.clone（）。json（）等，但是，在大多数情况下，我的输出为“承诺被拒绝，json输入意外结束”。我怎么解决这个问题？谢谢

Answer 1

看起来错误在于您如何处理响应：

 }).then(response => response.clone()).then(data => {

第二个.then（）中的数据没有返回获取响应，而是返回了获取本身的详细信息。在.then(response =>中，您可能想要做：

.then(response => {
   return response.json()
}

您不清楚要使用response.clone（）做什么，因为这通常会创建响应的克隆以用于缓存或其他操作-您打算如何处理克隆？ >

如果您在缓存功能中使用它，也许可以：

.then(response => {
   someCacheFunction(response.clone())
   return response.json()
}

，或者将其设置为预定义变量以供某些使用：

var responseClone;
... // code omitted
.then(response => {
   responseClone = response.clone()
   return response.json()
}

Answer 2

找到了答案。主要问题是饼干。提取时，我们需要确保设置了以下内容：

 getLoggedInUser = () => {
    const USER_API_URL = API_URL + "/api/profile";
    return fetch(USER_API_URL, {
        headers : {
            'Content-Type' : 'application/json'
        },
        method : "POST",
        'credentials': 'include'
    }).then(response => {
        console.log(response);
        return response.json()
    }).catch(function (err) {
        console.log(err)
    });
}

“凭据”：“包含”是必需的，以便浏览器接受cookie并使用相同的cookie从服务器检索数据。

即使状态为200，也无法获取数据

2 个答案: