Develop Reference

React node express app - Heroku CORS error

I have an express project set up on Heroku and a react front end set up on vercel.
When I make a request from the front end, I get the following error:
Access to fetch at 'https://helpr-dev.herokuapp.com/users/register' from origin 'https://helpr-front.vercel.app' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: 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.
I have CORS implemented on the Express app:
const cors = require('cors')
app.use(cors())
And I've also tried passing it a config like:
const whitelist = ['http://localhost:3000', 'https://helpr-front.vercel.app/']
const corsOptions = {
origin: function (origin, callback) {
if (!origin || whitelist.indexOf(origin) !== -1) callback(null, true)
else callback(new Error('Not allowed by CORS'))
},
credentials: true,
}
app.use(cors(corsOptions))
This is how a request looks like in the react app:
const submitRegisterForm = async e => {
e.preventDefault()
const response = await fetch(`${serverUrl}/users/register`, {
method: 'POST',
mode: 'cors',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
name: name,
email: email,
password: password,
accountType: accountType
})
})
const data = await response.json()
}
I've tried removing the mode: 'cors' part but it doesn't make a difference.
Can someone tell me what I'm missing here?
Front end app is hosted here: https://helpr-front.vercel.app/
Back end app is hosted here: https://helpr-dev.herokuapp.com/
Front end full code can be found here: https://github.com/coccagerman/helpr-front
Back end full code can be found here: https://github.com/coccagerman/helpr-back
Thank you!

So this was caused mainly by a problem with the connection to mongoDb atlas.
First, the Heroku IP adress wasn't whitelisted on the the database network connection. Fixed it like mentioned here: Connecting Heroku App to Atlas MongoDB Cloud service
Then I had an error on the mongo atlas connection URI I was using.
And lastly, It seems necessary to add the mode: 'cors', config on every request I make.
On express, no cors config is needed. I just use app.use(cors())

How do I Submit data from a vuejs form to zapier webhook using axios?

I am using vuejs / axios and I want to post data to a zapier webhook.
I've tried a number of things. However I continually get the following error:
Access to XMLHttpRequest at 'https://hooks.zapier.com/hooks/catch/7349379/owviy9/' from origin 'http://localhost:8080' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.
Here is my code:
submit(){
axios
.post(
'https://hooks.zapier.com/hooks/catch/7349379/owviy9j/',
this.formData,
{headers: {"Accept": "application/json"}}
)
.then(function(response) {
console.log(response);
});
}
I've also tried this but can't seem to get it to work:
var data = this.formData
axios.create({ transformRequest: [(data, _headers) => JSON.stringify(data)] })
.post('https://hooks.zapier.com/hooks/catch/7349379/owviy9j/', data)
}
How do I resolve this CORS issue?

From your first example just remove:
{headers: {"Accept": "application/json"}}
Zapier dosn`t allow headers to be sent.
Complete example:
const res = await this.$axios.post('https://hooks.zapier.com/hooks/catch/xxx/xxx/',
JSON.stringify(data)
)

When you try to make requests from the same machine but with different ports. Example: Your front end is running on port 3000, while your nodejs app is running on port: 8080. For security concerns the browser doesn't let you make the api requests.
Solution: Add Cors to your NodeJs App.
npm install cors
const cors = require('cors')
const app = express();
just add a line below this: app.use(cors()); //use it as a middleware and this will resolve your issue.

Access to fetch at from origin 'http://localhost:3000' has been blocked by CORS policy

Adding to the database shows the error. what should I do?
Access to fetch at 'http:xxx' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: 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.
my function:
addItem = (e) => {
e.preventDefault();
const ob = {
X: 53.0331258,
Y: 18.7155611,
}
fetch("http://xxx", {
method: "post",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(ob)
})
.then(res => res.json())
.then(res => {
console.log(res);
})
}

try using ''no-cors' mode.
fetch('http://localhost:8080/example', {
mode: 'no-cors',
method: "post",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(ob)
})

Your server should respond with a response that looks like below
Access-Control-Allow-Origin: https://localhost:3000
Untill you are able to configure that as a workaround you can install the below chrome extension to resume your testing
https://chrome.google.com/webstore/detail/who-cors/hnlimanpjeeomjnpdglldcnpkppmndbp?hl=en-GB
But the above is only a workaround to continue development
I would suggest you read this article for understanding CORS
https://javascript.info/fetch-crossorigin

You must install cors.
npm install cors
inside the main scripts index.js or app.js
const cors = require("cors");
app.use(cors());

I resolved the issue by installing the cors node module and adding this on the requested server
const cors = require("cors");
app.use(cors());

For browser CORS is enabled by default and you need to tell the Browser it's ok for send a request to server that not served your client-side app ( static files ).
if you use RestFul API with node and express add this middleware to your file
app.use((req, res, next) => {
res.header("Access-Control-Allow-Origin", "*")
})

Try using the following code:
var corsOptions = {
origin: "http://localhost:3000"
};
app.use(cors(corsOptions));
You should copy in server.js(or app.js)
(I've experienced the exact same problem as this one. I was able to solve the problem by adding the following code to server.js.)

The middleware should be like this.
app.use((req, res, next) => {
res.header({"Access-Control-Allow-Origin": "*"});
next();
})

const cors = require("cors"); app.use(cors());
i use this but can't solve this problem.
app.use((req, res, next) => { res.header({"Access-Control-Allow-Origin": "*"}); next(); }) when use this code than solve this problem

try to add annotation #CrossOrigin , its worked for me .
#RestController #RequestMapping(value="") #CrossOrigin

In WordPress version 6 I solved the issue by using the mode option available in fetch api here
apiFetch( { mode: 'no-cors', url: 'https://api.example.com/?q=' + attributes.search_string } ).then( ( posts ) => {
console.log( posts );
} );

Actually it's more efficient to fix this bug from the server side like this:
npm install cors
inside the post operation:
app.post("/...", (req, res) =>{
res.set('Access-Control-Allow-Origin', '*');
//whatever you want here
}
you can read this article https://www.stackhawk.com/blog/react-cors-guide-what-it-is-and-how-to-enable-it/#enable-cors-on-server-side
OR you can easily convert the client side to work on the same domain with the server side by adding in the package.json (client side)"proxy" of the server domain like this:
"proxy": "http://xxxx/"
in this case you don't have to add the domain name in each request anymore.
and the last solution "it's not recommended" by adding {"mode": "no-cors"} to your request.

make a new variable called header:
const header = new Headers({ "Access-Control-Allow-Origin": "*" });
pass this variable as an object in fetch:
fetch(url, { header: header })
.then((res) => res.json())
.then((data) => console.log(data));
This will resolve the issue

Reactjs Preflight Request Err

I am trying to fetch an API on ReactJS with basic authentication (this is a complex request).
I have stumbled upon many articles, most are suggesting to modify something on the node but here, in this case, I am not using any node server. I have commented out all the NodeJS code and I am fetching this API directly from componentDidMount(), apparently, ReactJS has it's own backend server. I am using a third party cors chrome plugin for the time being, but I am averse towards using third party proxy servers like Heroku or NGINX or third party libs like axios. Cors chrome plugin helped me to resolve the access-control-allow-origin issue but it then raised this new issue.
Access to fetch at 'https://server-iam-fetching/' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
I tried few things like appending access control checks on the header but none seems to work. Here is my sample code:
let headers = new Headers();
headers.append("Access-Control-Request-Headers", "*")
headers.append('Authorization','Basic ' + btoa(username + ":" + password));
credentials
allow requests
allow origins
..
..
etc
const someRequest = new Request(url, {
method: 'GET',
headers:headers,
mode:'cors',
cache: 'default'
});
componentDidMount(){
fetch(someRequest)
.then(response => response.json())
.then(json => console.log(json))
}
Feel free to comment for any questions. I am on MacOS. Also, I don't want to disable my chrome web security.

Actually, if you have access to the API you should fix it on your NGINX configuration or on backend codes. but if you have no access there are two recommended way:
Write a mapper proxy API by node/express and send all of your calls to it and the mapper API send it to the main API. in the mapper you have access allow all origins:
const express = require('express');
const request = require('request');
const app = express();
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', '*');
next();
});
app.get('/jokes/random', (req, res) => {
request(
{ url: 'https://the-main-api-address' },
(error, response, body) => {
if (error || response.statusCode !== 200) {
return res.status(500).json({ type: 'error', message: err.message });
}
res.json(JSON.parse(body));
}
)
});
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`listening on ${PORT}`));
If you are using webpack-dev-server you can use below config to allow all origins on your webpack devServer:
devServer: {
...
headers: {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
"Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
}
}
Or pass a proxy:
devServer: {
contentBase: DIST_FOLDER,
port: 8888,
// Send API requests on localhost to API server get around CORS.
proxy: {
'/api': {
target: {
host: "0.0.0.0",
protocol: 'http:',
port: 8080
},
pathRewrite: {
'^/api': ''
}
}
}
},
Hint: I prefer to use the first one.

This post is just for your development mode, you can launch an instance of Google Chrome that has not security modules and it won't send OPTION calls and definitely you won't see CORS error, so open your terminal and write the following commands in it:
open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args --user-data-dir="/tmp/chrome_dev_test" --disable-web-security

Failed to fetch: Request requires preflight, which is disallowed to follow cross-origin redirect

I'm using Express for webserver, and using isomorphic-fetch module from client to using XHR.
I have three servers for my web application:
Port 3000 -> Admin Website
Port 3001 -> Public Website
Port 3002 -> API Server
API Server has resources named "skills" which has some data, and get it like this:
GET http://mydomain:3002/skills
it returns JSON data.
But when I request to 3002 from 3000/3001, it fails with this message:
Fetch API cannot load http://example.me:3002/skills. Redirect from 'http://example.me:3002/skills' to 'http://example.me:3002/skills/' has been blocked by CORS policy: Request requires preflight, which is disallowed to follow cross-origin redirect.
I don't get it why there is 'redirection' or something. This is my server side code, I granted all CORS related headers:
const express = require('express');
const app = express();
...
// CORS
app.use((req, res, next) => {
var allowedOrigins = ['http://example.me', 'http://example.me:3000', 'http://example.me:3001', 'http://example.me:3002'];
var origin = req.headers.origin;
if(allowedOrigins.indexOf(origin) > -1){
res.setHeader('Access-Control-Allow-Origin', origin);
}
res.setHeader('Access-Control-Allow-Credentials', true);
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,Content-Type');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS, HEAD');
if (req.method === "OPTIONS") {
return res.status(200).end();
}
next();
});
app.use(require('./routes'));
...
app.listen(3002, () => console.log(".API Server listening on port 3002..."));
And this is client side code that using Fetch API:
fetch('http://example.com:3002/skills', {
method: 'GET',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
credentials: 'include',
cache: 'no-store',
mode: 'cors'
})...
As you can see there is no redirection code. I spent almost a day to fix this issue, but everything I tried was all failed, every information that I found was useless.
I think splitting services to API Server and Web Server(actually returns HTML) was good idea, and want to go with this approach.
Is there a way to fix this problem? Any advice will very appreciate.

I solved this issue few years ago, still don't get it why it happened.
However my solution was simple, put every API into /api path.