Heroku Node Express API and React Front end (blocked by CORS policy)

  Kiến thức lập trình

I have a React front end application hosted as a web app on Azure. I also have a SQL database hosted with Azure. I then have a node express API app that I deployed on Heroku (because I couldn’t get it to work on Azure). Currently I’m just testing the react app by hosting it locally, before pushing these fetch functions to the Azure deployment.

I’m able to run GET queries just fine like below:

import { useState, useEffect } from 'react';

export function Fetch_player(tag) {
    const [player, setPlayer] = useState([]);
    useEffect(() => {
        fetch(`https://rummikub-app-xpress-9db7df5621fa.herokuapp.com/api/player/${tag}`)
        .then((res) => {
            return res.json();
        })
        .then((data) => {
            console.log(data);
            setPlayer(data);
        });
    }, []);
    return (
        <div>
        
        {player.map((player) => (
            <div><text>{player.tag}</text></div>
        ))}
        </div>
    );
}

The problem is when I try to do the same, but POST to an update query route. I update the Method to POST and the URL according to the API route, but then I get all these errors about CORS:

Access to fetch at 'https://rummikub-app-xpress-9db7df5621fa.herokuapp.com/api/player/REGA' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Failed to load resource: the server responded with a status of 503 (Service Unavailable)

Here’s the post fetch I’m trying to run, which just plugs into a simple INSERT INTO query route in the Node express app that worked just fine when I ran the node express app locally and POSTed the request with POSTMAN. To fix these errors I tried cors-anywhere, but I still seem to be getting the same errors. I tried adding ‘X-Requested-With’ header, even though I’m reading that the browser is supposed to do that itself, and I imagine POSTMAN would also behave similarly? I’m just trying to repurpose the GET function so it’s possible I’m formatting this incorrectly in a few ways.

export function Fetch_addPlayer(tag) {
    const [player, setPlayer] = useState([]);
    useEffect(() => {
        fetch(`https://cors-anywhere-cvsquiggles-bd74156858f7.herokuapp.com/https://rummikub-app-xpress-9db7df5621fa.herokuapp.com/api/addPlayer/${tag}`, {
            method: 'POST',
            headers: {
                'X-Requested-With': 'XMLHttpRequest' ,
            },
    })
        .then((res) => {
            return res.json();
        })
        .then(data => {
            setPlayer(data);
        });
    }, []);
    return (
        <div>
            <div><text>Player added to database!</text></div>
        </div>
    );
}

Basically, when I run the node/express app locally all of the API route calls and queries work just fine, so it’s specifically an issue with my Azure React app POSTing (and I assume a PUT would have the same trouble) to the Heroku hosted node/express app.

I’ve tried implementing cors-anywhere to fix it, but I’m not having any luck so I must be misunderstanding something here. I’ve also designated ‘X-Requested-With’, and ‘Content-Type’ Headers in the fetch request, but that didn’t help at all either.

LEAVE A COMMENT