Cors issue i also set the proxy in pkg.json due to cors and set the api according to it but this error is not remove

Question

GET http://localhost:3000/api/fetch?search=12312321 404 (Not Found) cors issue in Reactjs and node js i use the proxy method in Reactjs but can't get rid from it please help me

proxy

"proxy":"http://localhost:5000/"

tried both

"proxy":"http://localhost:5000"

express

RegisterRoute.route('/fetch/:id').get( ( req , res) => {

console.log("called by someone ",req.params.id);

res.send("okey will");

});

Reactjs function which will call the backend api

FetchNotification(){

    axios({

        'method':'GET',

        'url':'api/fetch',

        'headers': {

            'content-type':'application/octet-stream',

            'x-rapidapi-host':'example.com',

            'x-rapidapi-key': process.env.RAPIDAPI_KEY
         }
         ,
        'params': {

            'id':'12312321'
        },
    })


}

when i simply call axios.get it perfectly work but when i give params to it it gives the error xhr:178 404 not found

a simple server which also returns the same result

const express = require('express');

const cors= require('cors');

const app= express();

var bodyParser = require('body-parser');

app.use(bodyParser.urlencoded({ extended: false }));

// parse application/json

app.use(bodyParser.json());

app.use('*',cors());

app.get('/fetch/:id',(req , res) => {

console.log("calling",req.params.id);

}); app.listen(5000);

Answer 1

I can see that you're using Nodejs as server side. So, you can try changing following line

app.use('*',cors());

to

app.use(cors());

If this doesn't solve the issue, you can try adding a google chrome extension for CORS (Most probably). In this way, you'll not need any proxies being set for running servers.

Also, you need to do a small change in URL, instead of calling

'url':'api/fetch'

you need to provide an id in your call, because the backend api is accepting a parameter

'url':'api/fetch/some_id'

Answer 2

I feel there are multiple issues. I'll try to address them one by one.

Firstly, if you are proxying your requests correctly (which I think you are as per your package.json), then you'd not require the cors package. So you can get rid of that package.

Read more about why you shouldn't let all incoming request bypass the CORS check from security point of view -> Is it safe to enable CORS to * for a public and readonly webservice?

Now secondly, the url which you've specified on the frontend is 'url':'api/fetch', which means browser will make a call to http://localhost:3000/api/fetch?search=12312321 which it correctly did as seen in your error statement for 404.

Specifying the proxy as "proxy":"http://localhost:5000" in package.json means that now you are making requests to http://localhost:5000 instead of http://localhost:3000, but the browser would still think its http://localhost:3000. That's the whole purpose of proxying and how you kinda fool browser to do CORS without throwing any error.

But because on your server, you are listening to app.get('/fetch/:id',(req , res) instead of app.get('api/fetch/:id',(req , res), it doesn't matches with this URL as you have not explicitly handled requests starting with /api in some separate router module either.

So you should either update the url in the axios call to url':'/fetch while the proxy value in package.json is "proxy":"http://localhost:5000" or url':'fetch and "proxy":"http://localhost:5000/" respectively. Notice how i've used the /

OR

You can update the URL on the express end to app.get('api/fetch/:id',(req , res)

Lastly, whenever you receive a request, you need to return some value(string or JSON or even status code) as result. In your case, you've simply console.log("calling",req.params.id); and didn't send back any response to the UI.

So even if your 404 would resolve after fixing the URL, you'd bump into request timeout error (408) as your UI will keep waiting for a response from the server while you didn't send any.

So you should do something like this maybe:

app.get('api/fetch/:id',(req , res) => {
    console.log("calling",req.params.id);
    res.send("It worked");
});

Notice how there's a response being sent back -> https://expressjs.com/en/starter/hello-world.html If you don't want to send back a response, then you can simply return status like 200, 504 etc.

Answer 3

if you apply below code in backend/server i thing it will debug.

  app.get('api/fetch/:id',(req , res) => {
    console.log("calling",req.params.id);
    res.send("It worked");
});