попадание в конечную точку rest-api из REACT, выборка возврата POST 500 Внутренняя ошибка сервера - PullRequest
Новая
       52

попадание в конечную точку rest-api из REACT, выборка возврата POST 500 Внутренняя ошибка сервера

0 голосов
/ 16 июня 2019

Я пытаюсь сделать POST-запрос к Rest API, который находится в Spring.

У меня есть пользовательский интерфейс в приложении REACT, и я пытаюсь сделать POST-запрос.В запросе POST я должен отправить объект JSON, как показано ниже: 

{
    "description": "Please write a small description",
    "name": "anbcd",
    "aFrom": "string1",
    "bFrom": "string2",
    "aTo": "string3",
    "bTo": [
        "item1"
    ]
}

Мой код запроса в приложении REACT выглядит следующим образом: 

export const callPOSTRestAPI = async (url, obj) => {
    let responseObj = {
        data: null,
        error: null
    }
    try {
        const response = await fetch(url, {
            method: "POST",
            credentials: "include",
            body: JSON.stringify(obj),
        });
        //console.log(response.json());
        if (response.ok) {
            let result = await response.json();
            responseObj.data = result;
            responseObj.error = null;
        }
        else {
            throw new Error(response.statusText);
        }
    }
    catch (error) {
        responseObj.data = null;
        responseObj.error = ("Error:" + error);
    }
    return responseObj;
}

Проблема:

REST API возвращает:

500 Internal Server.

Если я включаю заголовки в вызов выборки, я получаю сообщение об ошибке предпечатной проверки.

Пожалуйста, помогите.

Дополнительная информация:

Ниже приведен вызов GET fetch, который прекрасно работает. 

export const callGETRestAPI = async (url) => {
    console.log(url);
    let responseObj = {
        data: null,
        error: null
    }
    try {
        const response = await fetch(url, {
            method: "GET",
            credentials: "include"
        });
        if (response.ok) {
            let result = await response.json();
            responseObj.data = result;
            responseObj.error = null;
        }
        else {
            throw new Error(response.statusText);
        }
    }
    catch (error) {
        responseObj.data = null;
        responseObj.error = ("Error:" + error);
    }
    return responseObj;
}

Ниже приведены заголовки ответа, установленные в Spring REST API: 

response.setHeader("Access-Control-Allow-Origin", allowOrigin);
        response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Headers", "Origin,Accept, X-Requested-With, " +
                "Content-Type, Authorization, Access-Control-Request-Method, Access-Control-Request-Headers, Access-Control-Allow-Credentials");

В консоли: я вижу следующие вещи:

Заголовки запроса: 

Accept: */*
Content-Type: text/plain;charset=UTF-8
Origin: http://localhost:3000
Content-Length: 188
Accept-Language: en-us
Host: host-url
Referer: http://localhost:3000/
Accept-Encoding: br, gzip, deflate
Connection: keep-alive

Заголовки ответа: 

HTTP/1.1 500 Internal Server Error
Content-Type: text/plain;charset=UTF-8
Access-Control-Allow-Origin: http://localhost:3000
Pragma: no-cache
X-XSS-Protection: 1; mode=block
Access-Control-Allow-Methods: POST, PUT, GET, OPTIONS, DELETE
Access-Control-Max-Age: 3600
Access-Control-Allow-Headers: Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Authorization, Access-Control-Request-Method, Access-Control-Request-Headers, Access-Control-Allow-Credentials
Expires: 0
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Date: Sun, 16 Jun 2019 01:30:55 GMT
Access-Control-Allow-Credentials: true
Content-Length: 14
Connection: keep-alive
X-Content-Type-Options: nosniff
X-Frame-Options: DENY

Данные запроса: 

MIME Type: text/plain
Encoding: UTF-8
Request Data: {
    "description": "Please write a small description",
    "name": "anbcd",
    "aFrom": "string1",
    "bFrom": "string2",
    "aTo": "string3",
    "bTo": [
        "item1"
    ]
}

1 Ответ

0 голосов
/ 16 июня 2019

Используйте .then () для вызова извлечения.Вот хорошая ссылка для использования fetch.https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

await fetch(url, {
                method: 'POST',                
                headers: {                    
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(obj),
        })
        .then((res) => {
           //do stuff 
                })
            }

Если вы хотите проверить информацию из ответа, вы можете сделать это, как внутри функции then. 

.then((res, next) => {
            if(res.status === 200) {
                // do this
                })

Ответ запроса fetch ()объект Stream, что означает, что когда мы вызываем метод json (), возвращается Promise, поскольку чтение потока будет происходить асинхронно.https://developers.google.com/web/updates/2015/03/introduction-to-fetch?hl=en

...