CODEWITHSUNDEEP
reactjsapinginxcentoscors
Radical_Activity
Radical_Activity

Reputation: 2738

How to send API requests to a server via JSON? Keep getting CORS errors

I'm using ReactJs and Axios to send API requests to my server but I keep getting the same error:

Failed to load http://***: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 400.

I'm trying to perform a POST request. I've also tried to download a Chrome Plugin to allow CORS. It did work for the GET requests, but not working for POST it looks like.

If I try to make requests to https://jsonplaceholder.typicode.com/users it's working fine. So I guess there's something wrong with the server.

My server is using Nginx and is on a CentOS 7 OS.

Q: How is it possible to enable CORS just for my local development (localhost) or specific websites?

EDIT: I have already tried using this config on my Nginx server - without luck: https://enable-cors.org/server_nginx.html

Upvotes: 0

Views: 113

Answers (3)

thejsdevelopers
thejsdevelopers

Reputation: 27

If you have access to the server and the server is using Nodejs, this should work for you:

CD into your server folder:

cd server-folder

Then run this command in order to install the 'cors' package:

npm install cors

In order to access this package, go into your server file in your IDE and in the next available line:

const cors = require('cors');

Next, add this line to use the middleware (assuming you are using Express):

app.use(cors());

Upvotes: 0

Eike
Eike

Reputation: 2223

For development I use the Firefox extension CORS Everywhere. It modifies all web traffic, to include the correct CORS headers. (It works at least with the somewhat dated Firefox in Opensuse 42.3.)

https://addons.mozilla.org/en-US/firefox/addon/cors-everywhere/

Note, that this subverts a security mechanism of the browser.

For deployment you must configure the server, to send the correct CORS headers. (I did never do this, the finished website is planned to work in a single IP.)

Upvotes: 1

Mario
Mario

Reputation: 36527

While I can't answer you with some specific code, here's what happens (at least what happened last time I tried Angular and had similar issues):

Before sending any further requests, there'll be a header only OPTIONS HTTP request sent to the server URL. When answering this call, the server is supposed to send a header field Access-Control-Allow-Origin containing a whitelist of domains allowed to do further calls using the API. To whitelist all requests in your dev environment it should be enough to set Nginx to answer with Access-Control-Allow-Origin: *.

Upvotes: 1

Related Questions