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);
});
Related
Full error:
"Access to XMLHttpRequest at 'http://localhost:8080/api/tutorials' 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."
On the frontend I am using NuxtJS. I am sending a simple post request at the node server hosted on localhost:3000, but it's giving me this error even though I am using CORS in my app. The request is for inserting data in the mongodb database.
On the node server i.e. localhost:8080, I've tried:
var corsOptions = {
origin: "http://localhost:3000",
};
app.use(cors(corsOptions));
Tried this too but no success:
app.use(function (req, res, next) {
res.setHeader("Access-Control-Allow-Origin", "*");
next();
});
Please tell if there is any solution for this error. Thank you.
EDITED:
Here, I am using axios to first create an instance (on the frontend).
https://ibb.co/C2ChH5d
These are all the requests that I want to use.
https://ibb.co/5TbSHjF
And this is the request that is being made currently(create).
https://ibb.co/pPp8rdh
The nodeJS code: https://ibb.co/GFWMQW1
NodeJS code:
const express = require("express");
const bodyParser = require("body-parser");
const cors = require("cors");
const app = express();
require("./app/routes/tutorial.routes")(app);
var corsOptions = {
origin: "http://localhost:3000",
};
app.options("*", cors());
app.use(cors(corsOptions));
// parse requests of content-type - application/json
app.use(bodyParser.json());
// parse requests of content-type - application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: true }));
// simple route
app.get("/", (req, res) => {
res.json({ message: "Welcome to bezkoder application." });
});
// set port, listen for requests
const PORT = process.env.PORT || 8080;
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}.`);
});
const db = require("./app/models");
db.mongoose
.connect(db.url, {
useNewUrlParser: true,
useUnifiedTopology: true,
})
.then(() => {
console.log("Connected to the database!");
})
.catch((err) => {
console.log("Cannot connect to the database!", err);
process.exit();
});
Well, the problem was that I was using the API routes before initializing cors(). When I shifted the routes down the app.use(cors(corsOptions)), the problem was solved.
I am using a self signed ssl certificate (for now) to run an https server using express. Here is my app.js
const express = require('express');
const BodyParser = require('body-parser');
const config = require('./config');
const Logger = require('./loaders/logger');
const cors = require('cors');
const fs = require('fs');
const https = require('https');
const app = express();
const router = express.Router();
const usersApi = require('./api/users');
const authMiddleWare = require('./middlewares/auth');
var whitelist = ['http://localhost:8080', 'https://somedomain.web.app']
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.use(cors(corsOptionsDelegate));
app.use(BodyParser.json());
app.use('/user', usersApi);
app.get('/abc/:id', function (req, res, next) {
return res.json({ foo: 'bar' });
});
async function startServer() {
await require('./loaders').default({ expressApp: app });
https.createServer({
key: fs.readFileSync('server.key'),
cert: fs.readFileSync('server.cert')
},app).listen(config.port, err => {
if (err) {
Logger.error(err);
process.exit(1);
return;
}
Logger.info(`
################################################
🛡️ Server listening on port: ${config.port} 🛡️
################################################
`);
});
}
startServer();
When I try to access from my front end (vue js app using axios) on localhost:8080, it does not work if its running on remote server and I get this error:
Access to XMLHttpRequest at 'https://147.215.83.136/user/param' from origin 'http://localhost:8080' 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.
But if same thing runs on localhost, it works!
With the vue js app deployed remotely, it also does not work and I get the same error.
Other things I tried are:
app.use(cors());
app.options("*",cors());
app.use(cors({origin: "http://localhost:8080"}) // also tried putting https url of the vue app instead of this one. Still same result
So what is going on and why isn't it working(on mozilla or chrome)?
EDIT:
Network requests tab in chrome shows this:
Also be carefull to not mix content on https site with content generated from api request on http,
As there is no way to fix this later
I have used Postman to send Post requests and they are working fine but when I try to use axios it is giving me this error.
createAnimeList.js:27
Error: Network Error
at createError (createError.js:16)
at XMLHttpRequest.handleError (xhr.js:83)
xhr.js:178 POST http://localhost:4000/animes/add
net::ERR_CONNECTION_REFUSED
This is my backend code
router.post("/add", async (req, res) => {
console.log("Heeeere");
console.log(req.body.animeName);
var anime = new Animes({
animeName: req.body.animeName,
});
anime = await anime.save();
return res.send(anime);
});
Here is my React code where I am using Axios
onSubmit(event) {
event.preventDefault();
const anime = {
animeName: this.state.animeName,
};
console.log(anime);
axios
.post("http://localhost:4000/animes/add", anime)
.then((res) => console.log(res.data))
.catch((err) => console.log(err));
//window.location = "/anime";
}
Seems like a CORS issue
Install that on your node server:
https://www.npmjs.com/package/cors
Here is a simple example of node server with CORS enabled using this lib.
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')
})
you need to enable CORS( Cross-Origin-Resoruce-Sharing)
you can either use the cors package
https://www.npmjs.com/package/cors
or this code
place this controller before every controller in your application
app.use((req, res, next) => {
res.setHeader('Access-Control-Allow-Origin', '*'); // to enable calls from every domain
res.setHeader('Access-Control-Allow-Methods', 'OPTIONS, GET, POST, PUT, PATCH, DELETE'); // allowed actiosn
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
if (req.method === 'OPTIONS') {
return res.sendStatus(200); // to deal with chrome sending an extra options request
}
next(); // call next middlewer in line
});
It's a CORS issue:
You need to add the follow code in your backend:
const cors = require('cors');
const express = require('express');
const app = express();
app.use(cors({
credentials:true,
origin: ['http://localhost:PORT']
}));
Inside origin array you need to insert those urls who are in the white list.
Despite having the correct headers in my nodejs server:
app.get('/api', function(req, res){
res.header('Access-Control-Allow-Origin'. '*');
res.header('Access-Control-Allow-Methods', 'GET');
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
res.status(200).send({'a':'b'});
});
When I make requests in my firefox browser, I still get the error:
"Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://www.example.com/api/. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)."
This is how I make the request on the client side:
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(this.readyState === 4 && this.status === 200){
console.log(this.response);
}
};
xhr.open('GET', 'http://www.example.com/api', true);
xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
xhr.setRequestHeader('Access-Control-Allow-Methods', 'GET');
xhr.setRequestHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
xhr.send(null);
Dont set the "Access-Control-Allow-Origin" on client side,It should be added only on server-side.So,the server knows to accept request from all origins.
You can try cors module with express.
var express = require('express');
var cors = require('cors');
var app = express();
var corsOptions = {
origin: 'http://example.com',
optionsSuccessStatus: 200 // some legacy browsers (IE11, various SmartTVs) choke on 204
}
app.use(cors(corsOptions));
app.listen(80, function () {
console.log('CORS-enabled web server listening on port 80')
})
If you want for specific domain.
var express = require('express');
var cors = require('cors');
var app = express();
var allowlist = ['http://example1.com', 'http://example2.com']
var corsOptionsDelegate = function (req, callback) {
var corsOptions;
if (allowlist.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 an allowed domain.'});
});
app.listen(80, function () {
console.log('CORS-enabled web server listening on port 80');
});
For more detailing click here
HTH
My Node.js server code is running on an AWS instance. It looks like this:
var express = require('express');
var http = require('http');
var bodyParser = require('body-parser');
var logger = require('morgan');
var cors = require('cors');
var SuperLogin = require('superlogin');
var app = express();
app.set('port', process.env.PORT || 3000);
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cors());
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header('Access-Control-Allow-Methods', 'DELETE, PUT');
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
var config = {
dbServer: {
protocol: 'http://',
host: 'localhost:5984',
user: '',
password: '',
userDB: 'sl-users',
couchAuthDB: '_users'
},
mailer: {
fromEmail: 'gmail.user#gmail.com',
options: {
service: 'Gmail',
auth: {
user: 'gmail.user#gmail.com',
pass: 'userpass'
}
}
},
security: {
maxFailedLogins: 3,
lockoutTime: 600,
tokenLife: 86400,
loginOnRegistration: true,
},
userDBs: {
defaultDBs: {
private: ['supertest']
}
},
providers: {
local: true
}
}
// Initialize SuperLogin
var superlogin = new SuperLogin(config);
// Mount SuperLogin's routes to our app
app.use('/auth', superlogin.router);
app.listen(app.get('port'));
console.log("App listening on " + app.get('port'));
I am using an ionic 2 App that makes PUT calls to the Node.js server running on port 3000. When running the App in the browser on my laptop (using ionic serve) the PUT call gives the CORS error:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading
the remote resource at http://ec2-xx-xxx-xx-4xx.eu-central-1.compute.amazonaws.com/auth/login.
(Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
As far as I can tell the server code is setup to allow all origins but I am getting this error nonetheless.
This is because the preflight is triggered, which means that an OPTIONS request will arrive at your server. This is well explained at
this description by MDN as pointed out by #johannes merz in the comments to your question.
You can instruct your server to accept it by rep something like this:
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header('Access-Control-Allow-Methods', 'DELETE, PUT');
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
if ('OPTIONS' == req.method) {
res.sendStatus(200);
}
else {
next();
}});