I have an app on Heroku at http://random-name.herokuapp.com that sends emails with Mandrill. However, regardless of whether I'm running the app locally at localhost:5000 or remotely on Heroku, I throw the following error when trying to send emails:
XMLHttpRequest cannot load
https://mandrillapp.com/api/1.0/messages/send.json. Response to
preflight request doesn't pass access control check: A wildcard '*'
cannot be used in the 'Access-Control-Allow-Origin' header when the
credentials flag is true. Origin 'http://random-name.herokuapp.com' is
therefore not allowed access.
There's a lot of documentation on Stack Overflow about this error (see CORS: Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true), and consequently, I set my express headers to the following:
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "http://localhost:5000 http://random-name.herokuapp.com");
res.header('Access-Control-Allow-Credentials', true);
res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
However, this doesn't seem to solve the issue. I couldn't find anything useful in Mandrill's documentation either. I'm guessing I'm specifying the headers incorrectly, or perhaps they aren't even being used. Any ideas?
Access-Control-Allow-Origin takes a single value, not a space separated list.
You need to return whatever the client sends in the Origin request header (test to make sure that is an acceptable origin to you first though!).
Related
I have create a REST API using PHP Lumen framework to which I removed all CORS restriction for development using:
// Enable CORS on all API routes
header('Access-Control-Allow-Origin: *');
header("Access-Control-Expose-Headers: Content-Length, X-JSON");
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Authorization, Lang, Content-Type, X-Auth-Token');
Then on the frontend I use the library superagent to call it . For example I call the route POST http://127.0.0.1:8000/auth/register:
superagent.post('http://127.0.0.1:8000/auth/register').send({
name: 'name',
email: 'test#test.test',
password: '1234Test'
}).type('application/json')
.end((err, res) => {
console.log(res)
console.log(err)
})
Sadly I get a CORS error message that I can't understand:
Access to XMLHttpRequest at 'http://127.0.0.1:8000/auth/register' from origin 'http://localhost:9000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
I make some research but I can't find anything for the error It does not have HTTP ok status and testing this same request on Postman give me no error but the normal behaviour.
Have someone an idea how I can solve it? Where I can find some documentation about this type of error?
I'm quite curious why you're setting the headers "manually" on your own rather than using some existing and proven CORS-Middlwares which will do all the magic for you. I would avoid reinventing the wheel unless you need it for study-cases.
Here is a duplicate on stackoverflow:
Enable CORS in lumen
Here is the official documentation about lumen middlewares:
https://lumen.laravel.com/docs/7.x/middleware
Here are some well structured and known middlewares which will do the job for you:
https://github.com/fruitcake/laravel-cors
https://github.com/spatie/laravel-cors
I am trying to do cross-domain requests (GET, POST, DELETE...) with Angular and NodeJs via CORS. I am successful when I try on Chrome browser but on IE11 on Win7 I get errors below.
SEC7118: XMLHttpRequest for http://master.domain:1300/login required Cross-Origin Resource Sharing (CORS).
SEC7119: XMLHttpRequest for http://master.domain:1300/login required CORS preflight.
SCRIPT7002: XMLHttpRequest: Network Error 0x80070005, Access is denied.
Master domain side I set header Access-Control-Allow-Origin so successfully working on Chrome.
I have tried xdomain library but I could not succeed with Angular. I may miss something but I do not know what. There is no example on the internet.
What can I do to work this on IE? I can use any other way except CORS.
Any help?
Thanks
Just setting "Access-Control-Allow-Origin" header might not be enough, dependent on the type of request you're making. You should also set the "Access-Control-Allow-Methods" and "Access-Control-Allow-Headers"
As an example:
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, PUT, OPTIONS
Access-Control-Allow-Headers: Content-Type
Just try this code in nodejs side it's working
app.use(function (req, res, next) {
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:4200');
res.setHeader('Access-Control-Allow-Methods', 'POST');
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
res.setHeader('Access-Control-Allow-Credentials', true);
next();
});
I'm using an Express app on Heroku. I try to make a RESTful request to it from another NodeJS app.
Here's a snippet from the Heroku app, called app.js:
var express= require("express");
app.get("/results",function(req,res){
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,PUT,POST,DELETE,OPTIONS");
});
And here's a snippet from an app I run locally, local-app.js:
var request= require("superagent");
var req= request.get("http://url-to-app-js.com?query=1").set(
"Access-Control-Allow-Origin", "http://url-to-app-js.com",
"Access-Control-Allow-Methods", "GET,PUT,POST,DELETE,OPTIONS",
"Access-Control-Allow-Headers", "Content-Type, Authorization, Content-Length, X-Requested-With"
);
req.end(function(err,res){
// do things
});
When I run local-app.js, I got this error in my browser console: esponse 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.
I know that I could run the browser, Chromium, with certain security settings turned off, but I need to be able to run this without doing so.
What am I doing wrong? How do I fix it?
Access-Control-Allow-Origin, Access-Control-Allow-Methods, and Access-Control-Allow-Headers are response headers. They shouldn't appear in the request at all.
By adding non-standard headers you make the request a preflighted request instead of a simple request. (You might be doing something else that makes it a preflighted request, but the extra headers definitely do not help).
A preflighted request sends a OPTIONS request to find out if it is allowed by CORS before making the request (GET in this case) you actually want to make.
You are only setting the CORS response headers when you receive a GET request. Since you don't respond with them to the OPTIONS request, the browser refuses to make the GET request.
Am using OrientDb database, I have setup Orientdb server in my system, OrientDb has exposed Http Api's. So am trying to call API http://localhost:2480/query/test2/sql/select * from OUser , From javascript using AJAX call, I have set headers
Accept : "application/json;charset=utf-8",
"Access-Control-Allow-Origin":"*",
'Access-Control-Allow-Methods': 'POST, GET, DELETE, HEAD, OPTION',
'Access-Control-Allow-Headers': 'Origin, x-requested-with, content-type, accept',
'Access-Control-Allow-Credentials': true
And also I enabled CROS in orientdb-server-config.xml
parameter name="network.http.additionalResponseHeaders" value="Access-Control-Allow-Origin:*;Access-Control-Allow-Credentials: true;Access-Control-Allow-Headers: Origin, x-requested-with, content-type, accept;Access-Control-Allow-Methods: POST, GET, DELETE, HEAD, OPTION"
parameter value="utf-8" name="network.http.charset"
Still am getting
Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response.
How to enable CORS in OrientDb server?
Access-Control-Allow-* are response headers, not request headers. They are used so the server can give your JS permission to read its data (not so that your JS can give itself permission to read the server's data).
You are setting them as custom request headers (in your JavaScript).
The CORS spec requires that you have explicit permission to set custom request headers, and you don't have permission from the server to set those (and why would you? They are nonsense.).
Don't set them in the JS.
How I can deal with the CORS policy in Web Worker?
I would like to make an HTTPS call in a worker, but it throws the following CORS exception:
XMLHttpRequest cannot load xxxx Origin localhost is not allowed by Access-Control-Allow-Origin.
Maybe I should mention that I'm testing it on a Safari browser
I can't comment so I add my 2 cents in "answer".
It looks like you haven't configured the CORS headers, you can follow the great tutorial here:
http://www.html5rocks.com/en/tutorials/cors/
BR,
Saar
With Web Workers, you can inject scripts with importScripts(). If your server supports JSONP, you could directly make a request like this:
importScripts('http://example.com?jsonp=HandleResponse');
function HandleResponse(data) {
// Do something with the data
}
It depends on your web server type. E.g. in Express.js (node.js) you make it 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();
});
For other web servers see this site: http://enable-cors.org/server.html