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.
Related
I was trying to set a ui for uploading excel file using angular8. The front and backend (nodejs) applications are running in two different ports. While clicking upload button i am getting errors.
Have tried adding this code:
app.use(cors());
app.use(function (req, res, next) {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
res.setHeader('Access-Control-Allow-Credentials', true);
next();
});
still same error
typescript:
url_='http://localhost:3000/product/upload-exel'
public uploader :FileUploader = new FileUploader({
url:this.url_
});
html:
<input type="file" id="file"
ng2FileSelect [uploader]="uploader"
[(ngModel)]="path">
OPTIONS http://localhost:3000/product/upload-exel 404 (Not Found)
Access to XMLHttpRequest at 'http://localhost:3000/product/upload-exel' from origin 'http://localhost:4000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
My code is deployed on AWS and this thing worked for me:
Besides all the technical things (to be added) which are stated on several other Q/A make sure that your function returns the response to the front-end within 29 seconds. This is the default timeout (and maximum timeout) set for your response. After fixing this I was able to break the CORS error.
The error message indicates that the value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.
If your backend server is http://localhost:3000/ and your client frontend is running on http://localhost:4000/, then your backend headers should be:
Backend Server
app.use(cors());
app.use(function (req, res, next) {
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:4000/');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST,
OPTIONS, PUT, PATCH, DELETE');
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
res.setHeader('Access-Control-Allow-Credentials', true);
next();
});
In your backend, Since you are using cors module, you can do this and it is safe
var cors = require('cors')
var app = express()
//set options for cors
//add your frontend addresson in the origin
//for testing add localhost and port
var corsOptions = {
origin: 'http://localhost:3000',
optionsSuccessStatus: 200 // some legacy browsers (IE11, various SmartTVs) choke on 204
}
//for specific endpoint enable cors
app.get('/products/:id', cors(corsOptions), function (req, res, next) {
res.json({msg: 'This is CORS-enabled for only example.com.'})
})
app.listen(80, function () {
console.log('CORS-enabled web server listening on port 80')
})```
This may happen also when using nginx on Mac (homebrew)
If you enable debug error loging you can see this error when uploading - this is what's actually causing the CORS error:
25 open() "/usr/local/var/run/nginx/client_body_temp/0000000001" failed (13: Permission denied)
That may be a bug in the homebrew nginx: https://github.com/denji/homebrew-nginx/issues/124
Not sure if this is the proper fix, but I was able to get it to work this way:
sudo chown YOUR-MACOS-USER /usr/local/var/run/nginx/client_body_temp/
After that restart nginx
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 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.
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();
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());