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
Related
I'm working on a small ToDo app where I've Angular as front-end and Node.js/Express/Mongo as middleware/backend.
While I submit Login in my Login form, it hits the login API, however it returns one strange output in the console saying
OPTIONS http://localhost:3000/api/v1/users/login/ 0 {}
(see screenshot below) which doesn't allow me to get the dashboard even after successful login.
I've enabled CORS through installing the cors NPM module. and I've checked RESTFul services in Postman, and all are working fine.
[Updated] This is how I've enabled the CORS in my express.js's app.js file.
let cors = require('cors');
app.use(cors());
app.options('*', cors());
before a CORS request is sent to the server, clients will always send this "OPTIONS" request as a "preflight request", soliciting supported methods from the server.
This request being blocked may be an indicator of a wrong CORS configuration or an explicit block of all "OPTIONS" requests from the server. (CORS needs to be configured on the server as well).
More information can be found here
It seems that this is a known nodejs issue that is still open.
Based on the open github, seems that the best recommendation is to try something like this:
you need to allow both:
// Http.OPTIONS method for request that is hitting " apiUrl =https://127.0.0.1:3000/login".
// Allow CORS like below:
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'content-type');
res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH, OPTIONS');
Another great idea is to use the angular proxy settings for local development so that you will not need to add CORS for localhost at all.
Very good guidance in this SO answer here on setting up a proxy for angular If this work, then you can make 100% sure that it is indeed a CORS problem.
To handle CORS in express you dont need to add any dependency.
Notice that http://localhost:4200 is you angular app.
This worked for me:
//Add here whatever route you are using for the api.
app.use('/api', (req, res, next) => {
//Where http://localhost:4200 is the angular app
res.header('Access-Control-Allow-Origin', 'http://localhost:4200'),
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization');
next();
})
Note:
This goes after the place where you import the routes and before where you use them. kind of like:
const apiRouter = require('./app_api/routes/api_routes');
//The code i posted here
app.use('/api', apiRouter);
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.
I'm working with my Raspberry Pi.
I have my raspberry Pi, that on the IP: 192.168.X.X/file.json give me a webpage containing data in json. While trying to built a web page that requests in that page with the following code:
$.getJSON('http://192.168.X.x:8080/file.json', function(data) {
//code }
It returns the an error on the browser:
XMLHttpRequest cannot load http://192.168.X.X:8080/file.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.
Can you tell me how to fix it?
And where to put the code to fix it?
Your issue is related to Cross-Origin Resource Sharing (CORS): basically, you cannot access a domain via Ajax if it's not allowed on the server side. This is a "security" feature on most modern browsers. You won't encounter this problem using command line such as curl or chrome's Postman extension.
Make sure the domain requesting the data (localhost) is allowed in the Access-Control-Allow-Origin header, as well as the http verb (GET, POST, PUT... or * for every http methods).
Basically, it comes down to add the two following headers to the http://192.168.X.x/ server's response:
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: *
If you use node.js with Express, you can do the following :
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
// or res.header("Access-Control-Allow-Origin", "localhost");
res.header("Access-Control-Allow-Headers", "*");
next();
});
You need to configure your web server to set the appropriate CORS response 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!).