CODEWITHSUNDEEP
node.jsreactjsnext.js
Emmanuel Oga
Emmanuel Oga

Reputation: 99

React Http post request to backend nodejs is pending

I have a signup backend in nodejs and frontend in nextjs/reactjs

I see my http post request showing "Pending". No error message enter image description here

enter image description here

The pending error is pointing to the fetch call here

import fetch from 'isomorphic-fetch';
import {API} from '../config';

export const signup = (user) => {
    return fetch(`${API}/signup`, { ----- Pending pointing here
        method: 'POST',
        headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(user)
    })

    .then(response => {
        return response.json()
    })
    .catch(err => console.log(err));
}

config.js code

import getConfig from 'next/config';

const {publicRuntimeConfig} = getConfig();

export const API = publicRuntimeConfig.PRODUCTION
 ? publicRuntimeConfig.API_PRODUCTION
 : publicRuntimeConfig.API_DEVELOPMENT;

Signup code in Nextjs

const handleSubmit = e => {
        e.preventDefault();
        //console.table({firstname, lastname, email, phonenumber, password, confirmpassword,howdidyouknowaboutus, error, loading, message, showForm});
        setValues({...values, loading: true, error: false});
        const user = {firstname, lastname, email, phonenumber, password, confirmpassword,howdidyouknowaboutus};

        signup(user)
        .then(data => {
            
            if(data.error){
                setValues({...values, error: data.error, loading: false });
            }else{
                setValues({
                    firstname: '', 
                    lastname: '', 
                    email: '', 
                    phonenumber: '', 
                    password: '', 
                    confirmpassword: '',
                    howdidyouknowaboutus: '', 
                    error: '', 
                    loading: false, 
                    message: data.message, 
                    showForm: false
                });
            }
            console.log(data);
        });

    };

what is causing this pending? No error in the console.

Thank you.

Upvotes: 0

Views: 2372

Answers (2)

Krish
Krish

Reputation: 139

Use cors package in node

install the package if you are using npm

npm install cors

then use the cors in app.use

app.use(cors());

Upvotes: 0

Josh Aguilar
Josh Aguilar

Reputation: 2281

I assume the API host is different to the host your nextjs app is running on? If so, it could potentially be an issue with the Cross-Origin Resource Sharing (CORS) implementation on your /signup endpoint. Additionally, you may also need to explicitly allow certain request headers like Accept and Content-Type.

Not sure how the /signup endpoint is implemented but you'll need to set the following response headers.

"Access-Control-Allow-Origin": "*"
"Access-Control-Allow-Headers": "Origin, Content-Type, Accept"

You can also set specific values to Access-Control-Allow-Origin if you'd rather not set it to a wildcard * value like this.

"Access-Control-Allow-Origin": "http://somehost.com"
"Access-Control-Allow-Headers": "Origin, Content-Type, Accept"

Upvotes: 1

Related Questions