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

0
votes

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);

2
reactjsapiaxios
Are you still getting the CORS error in the browser console or just the 404 response from the API in the network tab in Dev Tools in browser? Also, it would help if you can share the code where you are making the api request from UI as well as the part where the API is exposed at the backend. – Ankush Raghuvanshi
i think this is not about cors because other api's such as post and get witout params are working perfectly for checking cors i also set the proxy in pkg,json and run the server and client concurrently and i find that the error comes when i give params to get i'm sharing the both api please chech now i have a pain in my head – lynn chris
Backend) RegisterRoute.route('/fetch/:id').get((req,res)=>{ console.log("called by someone ",req.params.id); res.send("okey will"); }); – lynn chris
React 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' }, }) } – lynn chris
Firstly, would be great if you could move the code info in the comments to the questions (you can read stackoverflow's FAQs about "how to ask a question"). Also, would be great if you could add the package.json code as well. – Ankush Raghuvanshi

2 Answers

1
votes

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'
0
votes

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.