TypeError: Network request failed using fetch ReactNative and Laravel response

Question

I am posting data to Laravel and expect a success response, but it catches the exception TypeError: Network request failed. Using get methods and login post methods using Laravel passport works all fine.

Adding 'Content-Type': 'application/json' to headers creates Network request failed for the login methods.
Postman returns valid errors or success, so works totally as expected.
Debugging showed that the request has been sent to Laravel and routing is correct as Visual Studio Code debugger stops at a breakpoint at return response.

public function postMessages()
{
    ...

    return response()->json(['success' => 'success'], 200);
}

Route::middleware('auth:api')->group(function () {
    Route::post('messages', 'Api\ChatController@postMessages');
});

export const fetchApi = async (endPoint, method = 'get', body = {}) => {
    const accessToken = authSelectors.get().tokens.access.value;
    const accessType = authSelectors.get().tokens.access.type;
    let headers = {
      ...(accessToken &&
      {
        Authorization: `${accessType} ${accessToken}`
      } 
      )
    };
    let response;
    if (method=='get' || Object.keys(body)==0 ) {
        response = await fetch(`${apiConfig.url}${endPoint}`, {
            method: method,
            headers: headers
        });
    } else {
        var formData = new FormData();
        Object.keys(body).forEach(type => {
            formData.append(type, body[type]);
        });
        response = await fetch(`${apiConfig.url}${endPoint}`, {
            method: method,
            headers: headers,
            body: formData
        });
        console.log('fetch response: ' + JSON.stringify(response));
    }
    let responseJsonData = await response.json();
    return responseJsonData;
}

export const postMessages = (eidug, type, name, messages) => fetchApi('/message', 'post', {
    'eidug': eidug,
    'type': type,
    'name': name,
    'messages': messages
});

I expect a response without any exception like Postman. What can be going wrong?

ysd31 · Accepted Answer · 2019-09-06 10:32:33Z

1

Have you enabled CORS in the backend? Once open inspect->network and then run fetch. Show if there are any errors.

answered Sep 6, 2019 at 10:32

ysd31

881 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Adriaan De Bolle Over a year ago

The post methods for login are working. I used some library for sending the response (IssueTokenTrait). Those methods have status 200, responseContenType: application/json, responseHeaders, ... The response()->json(['success' => 'success'], 200);arrives with status 0, reponse null, no responseHeaders at the inspect network.

Adriaan De Bolle Over a year ago

It was not necessary to use any cors middleware. Perhaps this is normal when using Laravel Passport and API token verification. The problem seemed to be a missing parameter. The validate function did not give any clear error, but the messages parameter was missing as I did not use JSON.stringify to pass an array from react-native to laravel... A bit strange it did not go to error_log, but it is solved :)

Collectives™ on Stack Overflow

TypeError: Network request failed using fetch ReactNative and Laravel response

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related