I try to connect from angular to a Express.io socket, but I have error 404 CORS. How can I solve this?
XMLHttpRequest cannot load http://localhost:3000/socket.io/?EIO=3&transport=polling&t=1447367208172-29. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.
If I load this route directly from browser directly, it works well But from localhost:80 angular to localhot:3000 express.io not works.
In my express.io I disabled the CORS, and it works well for the normal ajax requests, but not for socket.io :
app.use(function(req, res, next) {
res.header('Access-Control-Allow-Credentials', true);
res.header('Access-Control-Allow-Origin', req.headers.origin);
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
res.header('Access-Control-Allow-Headers', 'X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept');
next();
});
My initialization of socket.io in express.io:
app.http().io()
Are you running this angular app in chrome? I imagine its the same way for most browsers but on chrome CORS will not work with localhost: https://code.google.com/p/chromium/issues/detail?id=67743
What I've done to get around this in the past is alter my hosts (if on Windows). You can also use lvh.me instead of localhost if you do not want to alter your hosts file on Windows.
Related
I'm making and API with expressjs, when i make a request with postman it works and i get response, but when i do it with navigator it doesn't work, even i have enabled cors
This is the request with postman
This is the request with browser
I added access origin to my code
And I added cors
I tried with other browsers but the problem still the same.
Try following:
app.use((req, res, next) => {
res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, authorization");
res.setHeader("Access-Control-Allow-Methods", "GET, PATCH, POST, DELETE, PUT, OPTIONS");
next();
});
The problem is the port you are using (6000)
port 6000 is officialy reserved to TCP
Just change the port to an unreserved one and it will work (in my case I changed to 5000)
I'm not 100% sure about it, but the reason it works on postman and doesn't on browser it's problably because the browser actually expects the 6000 port to be exclusive to TCP, while postman doesn't.
link with full list of reserved ports
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();
});
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.
I've set up a Node.js (TypeScript hosted on Google Cloud Platform [GCP]) app for CORS but I'm still getting errors (Origin is not allowed by Access-Control-Allow-Origin) on mobile--desktop works fine.
I've searched but there are so many questions about getting this set up in general, I can't find why it specifically isn't working for mobile.
this.app.use(cors());
this.app.options('*', cors());
...
router.use(function(req, res, next) {
res.header('Content-Type', 'application/json');
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'DELETE,GET,OPTIONS,PATCH,POST');
res.setHeader('Access-Control-Allow-Headers', 'Origin, Accept, Authorization, Content-Type, X-Requested-With, Access-Control-Allow-Headers, Access-Control-Request-Method, Access-Control-Request-Headers');
next();
});
BTW The errors don't appear in the console until a few minutes after the page has loaded. (I've removed the URLs which are valid.)
"XMLHttpRequest cannot load due to access control checks."
"Failed to load resource: Origin is not allowed by Access-Control-Allow-Origin."
The issue was missing data in the DB, so the Node endpoint was not returning properly. The errors had nothing to do with the problem.
I have a client in a workspace and server side in the another workspace.
I have Cross orgin in the server workspace.
res.header('Access-Conrol-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'POST, GET, PUT, DELETE, OPTIONS');
res.header('Access-Control-Allow-Credentials', true);
res.header('Access-Control-Max-Age', '86400');
res.header('Access-Control-Allow-Headers', 'X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept');
But While calling from the client side getting below error
Mixed Content: The page at 'https://blogclient-vignesh55.c9users.io/?_c9_id=livepreview1&_c9_host=https://ide.c9.io#/home' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://10.237.69.147:15871/cgi-bin/blockpage.cgi?ws-session=18446744072714596624'. This request has been blocked; the content must be served over HTTPS
Your problem here is not the Same Origin Policy, but that your page is mixing http and https calls. Make sure to either use protocol-independent urls like //someurl.com or that you only use one protocol throughout your project.
PS: If you actually read the error message, it tells you exactly this:
the content must be served over HTTPS
and you try to call it via http:
http://xx.xx.xx.xx:15871/cgi-bin/blockpage.cgi?ws-session=XXX