I'm doing a backend in express, and frontend with react. And tried to send this cookie with a small expiration time, it has the configuration of cors working (for get, post, etc methods), and the fetch in react with axios and fetch (I have tried both)
The thing is, this code worked in Insomia and also in the URL of the server in the browser, but not in React. Why is that?
code:
`
const app = express()
headersConfiguration()
import cookieParser from 'cookie-parser';
const info = {
name: 'marcos',
apellidos: 'woodward'
}
// config basica:
app.use(cors());
app.use(express.json())
app.use(express.urlencoded({ extended: true }))
app.use(cookieParser("secretKey"))
app.get("/cookies", (req, res) => {
// const data = req.body
res.cookie(`primeraPrueba`, info.name, { maxAge: 600000 }).send(`cookie ready!`)
})
`
headers:
`
import express from "express";
const server = express();
export default function headersConfiguration() {
server.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', 'http://localhost:3000/'); // update to match the domain you will make the request from
res.header('Access-Control-Allow-Credentials', 'false');
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE');
next();
});
}
`
frontend (react):
this works with a button to make it simple:
`
const cookies = (e) => {
e.preventDefault()
axios.get("http://localhost:8080/cookies")
.then(function (response) {
document.cookies = response
console.log(response.cookie)
})
// fetch("http://localhost:8080/cookies")
}
`
I tried fetch, axios, changing the express headers between * and the specific url. also document.cookies = response.data in the front.I need q to save the cookie respecting the expiration.
I have a React app (localhost:3000) and a Node app (localhost:3001) to run a simple system. The problem is I'm getting the error Access to XMLHttpRequest at 'localhost:3001/app' from origin 'http://localhost:3000' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
I have tried with app.use(cors()) and also with cors options as below. Still I'm getting the above error.
Node app.js
const express = require('express');
const app = express();
const cors = require('cors');
const corsOptions = {
origin: 'http://localhost:3000/',
credentials: true,
optionSuccessStatus: 200
}
app.use(cors(corsOptions));
app.use(function (req, res, next) {
res.header('Access-Control-Allow-Origin', "http://localhost:3000");
res.header('Access-Control-Allow-Headers', true);
res.header('Access-Control-Allow-Credentials', true);
res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
next();
});
app.use(express.json());
app.get('/app', (req, res) => {
res.send({result: "hello"});
});
module.exports = app;
React app.js
import React, { Component } from "react";
import axios from 'axios';
class App extends Component {
componentDidMount(){ this.runInstance(); }
runInstance = () => {
axios.get(`localhost:3001/app`)
.then(res => {
console.log("res", res);
})
.catch(err => {
console.log("AXIOS ERROR:", err);
})
}
render() { return(<div></div>) }
}
export default App;
How can I solve this?
Since you use nodejs
installing cors
npm install cors
After that
var express = require('express')
var cors = require('cors')
var app = express()
app.use(cors())
app.get('/products/:id', function (req, res, next) {
res.json({msg: 'This is CORS-enabled for all origins!'})
})
app.listen(80, function () {
console.log('CORS-enabled web server listening on port 80')
})
Then after applying "cors" middleware. You need to insert "http://" before "localhost: in your react app".
Example
axios.get(`http://localhost:3001/api/app`)
.then(res => {
console.log("res", res);
})
.catch(err => {
console.log("AXIOS ERROR:", err);
})
You are using a different port to the one defined in corsOptions, try like below.
// app.js
...
runInstance = () => {
axios.get(`http://localhost:3000/app`)
.then(res => {
console.log("res", res);
})
.catch(err => {
console.log("AXIOS ERROR:", err);
})
}
...
Update:
Change all references to 3000 to be 3001, so that your CORS configuration matches the request you are trying to make.
const corsOptions = {
origin: 'http://localhost:3001/',
credentials: true,
optionSuccessStatus: 200
}
...
app.use(function (req, res, next) {
res.header('Access-Control-Allow-Origin', "http://localhost:3001");
...
});
I am developing the admin interface for my software and it was working fine in development (when I 'react start'). The problem is when I build and run it in production. React-admin won't load the data coming from the server, because of these 2 error in its requests.
OPTIONS http://localhost:3000/user?filter={}&range=[0,9]&sort=["id","ASC"] - CORS FAILED
GET http://localhost:3000/user?filter={}&range=[0,9]&sort=["id","ASC"] - NS_ERROR_DOM_BAD_URI
in development react-admin doesn't request 'options /user' neither I get these errors. I am using node express in the server side:
require('dotenv').config();
const express = require('express')
var cors = require('cors')
const app = express()
const port = process.env.SERVER_PORT;
const serverIp = process.env.SERVER_IP;
const { verifyUser } = require('./middleware/verification');
const { readUsers } = require('./db/dbManager');
app.use(cors())
app.get('/user', verifyAdmin, (req, res) => {
readUsers().then((response) => {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Expose-Headers', 'Content-Range');
res.setHeader('Content-Range', 'posts 0-24/319');
res.setHeader('Content-Type', 'application/json');
res.end(JSON.stringify(response));
});
})
app.options('/user', verifyAdmin, (req, res) => {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Expose-Headers', 'Content-Range');
res.setHeader('Content-Range', 'posts 0-24/319');
res.setHeader('Content-Type', 'application/json');
res.end();
})
app.use(express.static('build'));
app.listen(port, () => {
console.log(`Example app listening at http://${serverIp}:${port}`)
});
How can I fix these errors I am having in production?
I keep getting the "No 'Access-Control-Allow-Origin' header is present on the requested resource" error even though I have the following middleware in my express server (which is placed before all other middleware):
const express = require("express");
const app = express();
const bodyParser = require("body-parser");
const PORT = process.env.PORT || 5000;
const cors = require("cors");
const workoutRoutes = require("./routes/workoutRoutes");
const exerciseRoutes = require("./routes/exerciseRoutes");
const userRoutes = require("./routes/userRoutes");
const checkAuth = require("./middleware/check-auth");
app.use(function (req, res, next) {
res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader(
"Access-Control-Allow-Methods",
"GET, POST, OPTIONS, PUT, PATCH, DELETE"
);
res.setHeader(
"Access-Control-Allow-Headers",
"X-Requested-With,content-type, Authorization"
);
res.setHeader("Access-Control-Allow-Credentials", true);
next();
});
app.use("/users", userRoutes);
app.use(checkAuth);
app.use("/workouts", workoutRoutes);
app.use("/exercises", exerciseRoutes);
app.listen(PORT);
I know this question has been asked multiple times, but none of the solutions have worked for me, including using the cors npm package.
This is the alternative middleware that I tried using the cors module, which produces the same error:
app.options("*", cors());
app.use(cors({ origin: null }));
Any advice into why I could still be getting this error would be greatly appreciated. Thank you.
I figured out the issue, I was making the requests without a valid token, causing the following checkAuth middleware to respond with 'No valid token'.
const jwt = require("jsonwebtoken");
module.exports = (req, res, next) => {
try {
const token = req.headers.authorization;
if (!token) {
res.send("No valid token");
}
next();
} catch (error) {
console.log(error);
return;
}
};
What I still don't understand is why this response did not have the appropriate headers attached if the checkAuth middleware is run after the cors middleware. Anyway, thank you all for your help.
In summary I am using a viewer like api of dicom files called cornerstone, for this I connect to the WADO service of dc4chee to get the dicom, dcm4chee runs port 8080, and my application on node uses port 3000, so I am trying to show The browser's dicom.
https://www.npmjs.com/package/cornerstone-wado-image-loader
This is the error displayed by the browser
XMLHttpRequest can not load http: // localhost: 8080 / wado? RequestType = WADO & studyUID = 1.2.840.113704.1.111.5 ... 26513.429 & contentType = application% 2Fdicom & transferSyntax = 1.2.840.10008.1.2. In 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http: // localhost: 3000' is therefore not allowed access.
In the documentation specified
Note that the web server must support Cross source resource sharing or the image will fail to load. If you are unable to get CORS enabled on the web server you are loading DICOM P10 instances from, you can use a reverse proxy. Here's a simple Node.js based on http-proxy that adds CORS headers that you might find useful.
And show this example code but I'm using express and this code does not work
Var http = require ('http'),
HttpProxy = require ('http-proxy');
Var proxy = httpProxy.createProxyServer ({target: 'http: // localhost: 8042'}) .listen (8000);
Proxy.on ('proxyRes', function (proxyReq, req, res, options) {
// add the CORS header to the response
Res.setHeader ('Access-Control-Allow-Origin', '*');
});
Proxy.on ('error', function (e) {
// suppress errors
});
Also use npm cors here the code
Var express = require ('express')
Var cors = require ('cors')
Var app = express ()
App.get ('/ products /: id', cors (), function (req, res, next) {
Res.json ({msg: 'This is CORS-enabled for a Single Route'))
})
App.listen (80, function () {
Console.log ('CORS-enabled web server listening on port 80')
})
But with this I enable the cors on port 3000 and not the 8080, I need the mode to activate or add 'Access-Control-Allow-Origin in headers response and not in header request,
How can I do to add CORS on port 8080 where dcm4chee runs from NODEjs?
update!
The server responds with the following;
RESPONDE HEADER
Content-Type:application/dicom
Date:Sat, 01 Apr 2017 01:15:38 GMT
Expires:0
Server:Apache-Coyote/1.1
Transfer-Encoding:chunked
X-Powered-By:Servlet 2.4; JBoss-4.2.3.GA (build: SVNTag=JBoss_4_2_3_GA
date=200807181439)/JBossWeb-2.0
REQUEST HEADER
Accept:*/*
Accept-Encoding:gzip, deflate, sdch, br
Accept-Language:es-ES,es;q=0.8,en-US;q=0.6,en;q=0.4
Connection:keep-alive
Host:localhost:8080
Origin:http: //localhost:3000
Referer:http: //localhost:3000/
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like
Gecko) Chrome/55.0.2883.87 Safari/537.36
HOW TO ENABLE THE CORS IN RESPONSE HEADER??
do
npm install cors --save
and just add these lines in your main file where your request is going.
const cors = require('cors');
const express = require('express');
const app = express();
app.use(cors());
Adding CORS(Cross-Origin-Resource-Sharing) to your node, express app is quite easy...
You need to install cors library via npm first, using the command below:
npm install cors -S
and if you need it globally, just add -g flag to it...
Then in your express app, do this:
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());
Also these are other examples for cors from their doc:
var express = require('express')
var cors = require('cors')
var app = express()
app.use(cors())
app.get('/products/:id', function (req, res, next) {
res.json({msg: 'This is CORS-enabled for all origins!'})
})
app.listen(80, function () {
console.log('CORS-enabled web server listening on port 80')
})
Configuring CORS Asynchronously:
var express = require('express')
var cors = require('cors')
var app = express()
var whitelist = ['http://example1.com', 'http://example2.com']
var corsOptionsDelegate = function (req, callback) {
var corsOptions;
if (whitelist.indexOf(req.header('Origin')) !== -1) {
corsOptions = { origin: true } // reflect (enable) the requested origin in the CORS response
}else{
corsOptions = { origin: false } // disable CORS for this request
}
callback(null, corsOptions) // callback expects two parameters: error and options
}
app.get('/products/:id', cors(corsOptionsDelegate), function (req, res, next) {
res.json({msg: 'This is CORS-enabled for a whitelisted domain.'})
})
app.listen(80, function () {
console.log('CORS-enabled web server listening on port 80')
})
To enable cors you can do this:
var cors = require('cors');
app.use(cors());
// to change your ports for different cors stuff:
app.set('port', process.env.PORT || 3000);
app.listen(app.get('port'), function() {
console.log('we are listening on: ',
app.get('port'))
});
Remember that cors are middleware, so you will want to have app.use before it so that your incoming requests will go through cors before they hit your routes.
You can change the ports depending on which one you want to use. I am pretty sure you can also replace the || with && to listen on multiple ports and set cors on those.
In raw node, I believe you have to use the writeHead, but I am not sure about the raw node implementation.
The error displayed by the browser means, server localhost:8080 refused a request from localhost:3000, It seems cors didn't set well on server localhost:8080.
The response header should have something like this:
Access-Control-Allow-Headers:Content-Type,Content-Length, Authorization, Accept,X-Requested-With
Access-Control-Allow-Methods:PUT,POST,GET,DELETE,OPTIONS
Access-Control-Allow-Origin:*
Try add cors header in your 8080 server.
app.all('*', function (req, res) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
//...
});
CORS didn't work on localhost until I added http:// to request url
Not working localhost:3001
Working fine http://localhost:3001
This is what my working code looks at the end
Node side
var cors = require('cors')
const app = express();
app.use(cors()); // Make sure this line comes right after express()
Front-end side
let response = await axios.post("http://localhost:3001/uploadFile", formData);
// the http:// is required cors to work for localhost
This code is helped me to resolve the resources cors issue with the express. And You can use other options easily with the asynchronous origin configuration.
var cors = require('cors'); //import cors module
var whitelist = ['http://localhost:8000', 'http://localhost:8080']; //white list consumers
var corsOptions = {
origin: function (origin, callback) {
if (whitelist.indexOf(origin) !== -1) {
callback(null, true);
} else {
callback(null, false);
}
},
methods: ['GET', 'PUT', 'POST', 'DELETE', 'OPTIONS'],
optionsSuccessStatus: 200, // some legacy browsers (IE11, various SmartTVs) choke on 204
credentials: true, //Credentials are cookies, authorization headers or TLS client certificates.
allowedHeaders: ['Content-Type', 'Authorization', 'X-Requested-With', 'device-remember-token', 'Access-Control-Allow-Origin', 'Origin', 'Accept']
};
app.use(cors(corsOptions)); //adding cors middleware to the express with above configurations
To solve this problem first of all you have to understand what Access-Control-Allow-Origin: The value for this Header will be the host from where you will send a request to your server ( eg express ).
Step 1: allow cors on the server side, (to allow cross origin request you can use * instead of http://localhost:3000:
var express = require("express");
var app = express();
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*"); // update to match the domain you will make the request from
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
Step 2: just use your http client , I am using Axios:
var qs = require("querystring");
var axios = require("axios");
const sendEmail = (email, subject, template) => {
var data = qs.stringify({
email: email,
subject: subject,
template: template,
});
var config = {
method: "post",
url: "https://abc-domain.com/endpoint",
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
data: data,
};
axios(config)
.then(function(response) {
console.log(JSON.stringify(response.data));
})
.catch(function(error) {
console.log(error);
});
};
module.exports = sendEmail;
//Définition des CORS Middleware
app.use(function(req, res, next) {
res.setHeader("Access-Control-Allow-Headers", "X-Requested-With,content-type, Accept,Authorization,Origin");
res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS, PUT, PATCH, DELETE");
res.setHeader("Access-Control-Allow-Credentials", true);
next();
});`enter code here`
I also met this issue.
To solve it I used CORS module and imported it into my routings:
import cors from 'cors';
const router = new Router();
router.get('/posts', cors(), PostController.getAll);
add the following in your route handler
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
for example instead of this
app.get("/monsters", (req, res) => {
const arr = [
{
name: "Abanoub",
id: "215",
},
{
name: "Mena",
id: "sd5",
}
];
res.send(arr);
});
use headers I mentioned before.
so the route handler will be like that:
app.get("/monsters", (req, res) => {
const arr = [
{
name: "Abanoub",
id: "215",
},
{
name: "Mena",
id: "sd5",
}
];
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.send(arr);
});