Cross domain requests using Angular & NodeJs (CORS) - javascript

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();
});

Related

Request blocked by CORS policy using superagent and a Lumen API

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

CORS error when sending GET to localhost from file:// URL via XMLHttpRequest

I have a server running on my computer and simple .html file with button for receiving data from server.
It uses Javascript's XMLHttpRequest for sending GET response to server app, i.e. localhost with app's port "http://localhost:8888/getData", but it give a CORS error on Firefox browser.
The script making the request is served via a file:// URL.
I was looking for a lot of information on this issue, but had not found any.
Is there any way to solve it? I don't have any experience in web development and cannot understand correctly some things, but when I write "http://localhost:8888/getData" in address line of browser, it works fine.
The server should be cross origin aware. In java you can use #crossorigin annotation.
You need to add CORS support.
To enable cross-origin requests in FireFox, Safari, Chrome and IE 10 and later your server must attach the following headers to all responses:
Access-Control-Allow-Origin: domain name
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: ACL, CANCELUPLOAD, CHECKIN, CHECKOUT, COPY, DELETE, GET, HEAD, LOCK, MKCALENDAR, MKCOL, MOVE, OPTIONS, POST, PROPFIND, PROPPATCH, PUT, REPORT, SEARCH, UNCHECKOUT, UNLOCK, UPDATE, VERSION-CONTROL
Access-Control-Allow-Headers: Overwrite, Destination, Content-Type, Depth, User-Agent, Translate, Range, Content-Range, Timeout, X-File-Size, X-Requested-With, If-Modified-Since, X-File-Name, Cache-Control, Location, Lock-Token, If
Access-Control-Expose-Headers: DAV, content-length, Allow
These headers will enable cross-domain requests in FireFox 3.6+, Safari 4+, Chrome 4+ and IE 10+

Mandrill XMLHttpRequest Error - invalid Access-Control-Allow-Origin headers

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!).

How to allow WebWorker to call HTTPS URL

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

Share credentials with cross domain script tag in Firefox

Suppose I've authorized in domain boo.com already and have this session:
s:x2GYrvxGgmsfFwx7gDbKXmwB.4BDXLpMaSqD9hgeTkBDx3z4TeczJeC50gnrH5bc+kWU
What I want is to add a script tag to domain foo.com, points to boo.com:
<script src='http://boo.com/blah.js'></script>
In all browsers including Safari and Google Chrome, the script tag sets the cookie value in HTTP headers but it doesn't work in Firefox.
Firefox doesn't set the cookie headers so I get Unauthorized error from server. What is the problem?
UPDATE:
I enabled CORS in server-side but the problem is still exist in Firefox:
app.use(function (req, res, next) {
// Website you wish to allow to connect
res.setHeader('Access-Control-Allow-Origin', 'http://foo.com');
// Request methods you wish to allow
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
// Request headers you wish to allow
res.setHeader('Access-Control-Allow-Headers', 'Cookie');
// Set to true if you need the website to include cookies in the requests sent
// to the API (e.g. in case you use sessions)
res.setHeader('Access-Control-Allow-Credentials', true);
// Pass to next layer of middleware
next();
});
Here is the solution:
<script src="http://boo.com/blah.js" crossorigin="anonymous"></script>
Read more here:
http://blog.errorception.com/2012/12/catching-cross-domain-js-errors.html
I found the problem. Because my Firefox doesn't accept third-party cookie, the script tag and all other http requests from another domain don't share the cookie.

Categories