I'm getting the following error in Firefox
"Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost/socket.io/?EIO=3&transport=polling&t=1422586440181-21. This can be fixed by moving the resource to the same domain or enabling CORS."
I checked these other stack overflow questions, but no success yet. Also note that io.set is not supported in the latest socket.io and my attempts at server configuration have failed.
Socket.io + Node.js Cross-Origin Request Blocked
how to set socket.io origins to restrict connections to one url
How to enable CORS on Firefox?
and I have tried adding these statements to my server:
io.origins('http://localhost:3002')
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();
Related
I am running a node.js API on port 8000 which is connected locally to mongo db.
I then start my react server on port 3000 and straight away in console I get the error:
Access to XMLHttpRequest at 'http://localhost:8000/api/hero/' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Is this normal for a localhost setup?
Yes, because CORS doesn't care about localhost in any specific way. Instead, the combination (!) of hostname and port is being used to differ between multiple parties.
Hence, for CORS, localhost:3000 is something completely different than localhost:8000, so, yes, this is normal.
I guess localhost:3000 is running webpack dev server? If so the simplest way to resolve this is to config your webpack dev server to proxy the request for you, so no need to add CORS handling on your own express server
in your webpack.conf.js, add
devServer: {
proxy: {
'/api': 'http://localhost:8000'
}
}
Access-Control-Allow-Origin block all request, that are not defined in your node.js API
Add the following lines to your node.js server. This allows you to access the api from every url.
this.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, authorization");
res.header("Access-Control-Allow-Methods", "GET, POST, OPTIONS, PUT, DELETE");
next();
});
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 currently have access control allow origin set to *
When I try uploading a file without authorization cors blocks my request
I get these errors:
Access to XMLHttpRequest at 'https://serverurl.com' from origin 'https://fronendurl.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I'm using express and Node.js
This is my app.js file
app.use(cors());
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,PUT,POST,DELETE,OPTIONS');
res.header("Access-Control-Allow-Headers", 'Origin,X-Requested-With,Content-Type,Accept,content-type,application/json');
next();
});
I'm assuming both https://fronendurl.com and https://serverurl.com are sitting on the same machine.
If you're creating a call, say AJAX to a different domain than your page is on from the same origin <= This gets blocked by the browser as it usually allows a request in the same origin for security reasons.
For a quick medicine I would tryout moesif's chrome plugin or firefox plugin.
This question already has answers here:
CORS: Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true
(11 answers)
Closed 4 years ago.
am currently having a problem with Ionic 1 when using a release build on android 4.4. I keep getting a cors error. In addition am using a node.js back end with cors requests specified in it already. This is the error am seeing so far:
SEC7121: [CORS] The origin 'http://localhost:8100' found * in the Access-Control-Allow-Origin response header when the credentials mode was include for cross-origin resource at 'https://www.slywolf.co.za/api/auth/signin'.
Any assistance regarding this will be greatly appreciated.
Add This as a middle ware in your node.js server.
This will allow cross origin request with Credentials
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "http://localhost:8100");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
res.header("Access-Control-Allow-Methods", "GET, POST,PATCH, DELETE, PUT");
res.header("Access-Control-Allow-Credentials", true);
next();
});
I have a stand-alone ExpressJS API that I have built that should be able to service mobile apps and web apps. I'm trying to test the API using a simple AngularJS client app that I have built. The API service runs fine when I host it locally.
I'm getting Cross Domain Request errors when trying to make a GET call to the API hosted on my external server. I'm using Chrome v39
EDIT: my error turns out to be an incorrect URL reference to my heroku API. Please see my answer, below.
XMLHttpRequest cannot load http://myservice.heroku.com/some-api-endpoint?request-parameter=value. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin http://localhost:5001 is therefore not allowed access.
After reading and scanning numerous articles, I've tried the following:
CORS Code on the API
Added to app.js
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
res.header("Access-Control-Allow-Headers", "Cache-Control, Pragma, Origin, X-Requested-With, Content-Type, Accept");
res.header("Access-Control-Max-Age", "1728000");
res.header("Access-Control-Expose-Headers", "Cache-Control, Pragma, Origin, X-Requested-With, Content-Type, Accept");
if (req.method === 'OPTIONS') {
res.statusCode = 204;
return res.end();
} else {
return next();
}
});
CORS Code on the API (Attempt 2)
Using the CORS node_module instead of the above, yields the same errors
Added to Package.json
"cors" : "~2.5.2"
Added to app.js
var cors = require('cors');
app.use(cors());
Client Code (Attempt 1)
$http({
url: 'http://myservice.heroku.com/some-api-endpoint?request-parameter=value',
method: 'GET',
headers : {
"Origin" : "myclient.heroku.com",
"Access-Control-Expose-Headers": "X-Requested-With",
"Access-Control-Request-Method" : "GET",
"Access-Control-Request-Headers" : "Origin, X-Requested-With, Content-Type, Accept"
}
})
Errors in the chrome dev console:
Refused to set unsafe header "Origin" angular.js:9625
Refused to set unsafe header "Access-Control-Request-Method" angular.js:9625
Refused to set unsafe header "Access-Control-Request-Headers" angular.js:9625
XMLHttpRequest cannot load http://myservice.heroku.com/some-api-endpoint?request-parameter=value, which is disallowed for cross-origin requests that require preflight. (index):1
Client Code (Attempt 2)
thePath = 'http://myservice.heroku.com/some-api-endpoint?request-parameter=value'
+'&callback=JSON_CALLBACK';
$http.jsonp(thePath)
.success(function(data){
console.log(data);
});
Errors received in the Chrome Dev Console:
Uncaught SyntaxError: Unexpected token : endpoint?request-parameter=value&callback=angular.callbacks_0:1
This has been stumping me for two days. Any help is appreciated!
The error turned out to be the reference to applications hosted on Heroku. I was attempting to make my get requests to myapp.heroku.com and not myapp.herokuapp.com. This is a subtle difference that caused there error.
Using cURL or typing in the request into the browser's address bar for myapp.heroku.com will redirect your request to myapp.herokuapp.com and complete the request successfully. However, made from Angular.js $http() function resulted in the Cross Domain error.
The simplest problems seem to cause the most confusion.
You are taking a convoluted route for CORS. Use nodejs CORS middleware to do your stuff....
add,
"cors": "^2.5.1",
to your dependencies in package.json & in app module,
var cors = require('cors');
//add cors to do the cross site requests
app.use(cors());