I'm trying to allow multiple cors with node in my express api, I've been able to get it to work but am currently facing two issues.
I can't connect to my api using postman because I checked and it turns out the origin sent from postman is undefined.
I have a mobile app which also communicate with the server, the issue is after I allowed multiple specific origin, the app also can't communicate with the server.
How do I solve this issue, because I can't leave my api server open to allow communication from every origin.
Have you tried with Cors for nodejs
Add the dependency:
$ npm install cors --save
And then add cors to your app.js
var cors = require('cors')
var app = express()
app.use(cors())
On production try this instead of * on Access-Control-Allow-Origin header, For development allow any source will not be a problem (depend on your scenario)
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "yourdomain.com");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
app.use(function(req, res, next) {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
res.setHeader('Access-Control-Expose-Headers','Content-Type,expire');
next();
});
Try this one in your server. If you want to pass extra header parameter you need to add those variable in res.setHeader('Access-Control-Allow-Headers', 'Content-Type , token'); but remember don't user '-' in the variable name.
Related
I am in a team doing a client-server application. We are using Node.js (v12.18) in the backend as an API, and React (v16.13) for the frontend. Recently I've found this bug related to the CORS policy. I'm trying to send a POST request, deleting one resource in the database and when trying to delete it, this is the error I get:
Access to fetch at 'http://localhost:8080/clientes/eliminar' 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.
As far as I researched in forums and discussions I always find the same resolution, which is using the "Access-Control-Allow" headers, but we are already using them. I tried to change the POST method by a DELETE method when doing the request, but I find the same issue.
The headers that we are currently using in the backend, in case someone wonders what we have.
app.use(function (req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Credentials", "true");
res.header("Access-Control-Allow-Methods", "GET, POST");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, token");
next();
});
The sites I visited in order to solve the problem were pretty much the same as this one
TYSM for reading until here and ask for more information you need. Every piece of help is appreciated.
Have you already tried to add CORS to the project and use it as a middleware?
//...
const cors = require('cors')
//...
app.use(cors())
I have a server running on localhost:3000, and I set my app.js to use the angular router when I try to access localhost:3000 in my browser
(example :app.use('/', express.static(path.join(__dirname, '/dist/Client')));)
When I make a post request to my api I do:
const headers = new Headers({
'Content-Type': 'application/json'
});
const options = new RequestOptions({
headers: headers
});
this.http.post('http://localhost:3000/api/someAction',{body},options)
.toPromise()
.then(//function)
Untill now everything is correct, but how can I make my server accessible from another computer. For example if another computer on the same network knows the private IP address of the server I want him to be able to access my app when he navigate to for example 192.168.1.10:3000. Right now I can access but all my http requests fail and I have the following error
Access to XMLHttpRequest at 'http://localhost:3000/api/someFunction'
from origin 'http://192.168.1.10:3000' has been blocked by CORS policy:
Response to preflight request doesn't pass access control check: It does not
have HTTP ok status.
In app.js I have the following:
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
next();
});
This is a CORS error message you're getting.
You can use the Express CORS middleware to allow calls from other origins to your server. Make sure to choose the right options to allow calls from your other PC.
https://expressjs.com/en/resources/middleware/cors.html
And also make sure to place the CORS middleware at the top of your application definition.
const app = express();
app.use(cors({ origin: "*" })); // Do this first
//... the rest of your routes and handlers and middlewares
From your local machine where things seem to work correctly, open your Chrome Dev Tools, and make sure OPTION calls are being made and fulfilled successfully, and that proper headers are being returned.
Lastly, from a security perspective, remove or restrict the CORS options as much as possible for your production environment. Only use flexible CORS policy during development and testing.
This question already has an answer here:
CORS Error: “requests are only supported for protocol schemes: http…” etc
(1 answer)
Closed 3 years ago.
SOLUTION: It turns out I needed to change https://localhost:3000, to http://localhost:3000. (My follow-up question would be why this is the case, especially as my code worked for https://www.remoteserver.com/`).
I have a development server at https://localhost:3000 and a production server at https://www.remoteserver.com (Node.js/Express). My client is at https://localhost:4200 (Angular).
I fixed the Cross-Origin Request Blocked issue with https://www.remoteserver.com, using the code as below:
var cors = require(cors());
app.use(cors());
app.options('*',cors());
var allowCrossDomain = function(req,res,next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET, PUT, POST, DELETE');
res.header('Access-Control-Allow-Headers', 'Content-Type');
next();
}
app.use(allowCrossDomain);
But using the same code for my development server https://localhost:3000 I am still facing the CORS blocked issue, and I haven't been able to get rid of the problem.
Is there any reason that the code above would work for the production server but not for the development server?
Any ideas on a fix or what I should try next?
Many thanks!
The three solutions, avoiding CORS problem
Allow CORS to server side
Use proxy server
Use JSONP
Try to use as the following way
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Methods", "GET, PUT, POST");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
Get know details link
I have hosted a simple nodejs app on heroku with a route for 'post'. I am trying to access its post API from an Angular application - not from same domain. I am getting 405 (Method not allowed) in my browser console.
As far as i have searched, I have learnt HTTP POST and PATCH methods are restricted for cross-domain access. Can someone help me in accessing this POST method?
In order to enable CORS in an express.js app you need to send the Access-Control-Allow-Origin. You can add a middleware somewhere around the start the of the application:
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
Try using cors middleware like below
var express = require('express'),
cors = require('cors'),
app = express();
app.use(cors());
//add HTTP request handlers
I'm trying to go from Domain 1 using AS3 to hit Domain 2 running node.js/express
When I do
var request:URLRequest = new URLRequest(url);
request.method = URLRequestMethod.POST;
It tries to hit [url]/crossdomain.xml and gets a 404.
On the node.js server, running express, it returns the CORS stuff in the header, not as a stand-alone file on a specific route, like so:
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
Is there anything I can do, besides putting the CORS file at /crossdomain.xml, that will enable AS3 to recognize the permissions being returned in the header?
No, there is no way. You need crossdomain.xml at the root of your domain.
Can AS3 recognize the CORS permissions from the header?
Yes.