I'm using Angular 8 and ExpressJS. Everything work perfectly, the app is live and a lot of users (6000) are using it. But there are a few users (less than 10) that get Unknown Error (code 0) from any API call.
This is the error response:
{"headers":{"normalizedNames":{},"lazyUpdate":null,"headers":{}},"status":0,"statusText":"Unknown Error","url":"https:/xxxxxxxxxx/api/auth/recover-pass","ok":false,"name":"HttpErrorResponse","message":"Http failure response for https://xxxxxxxx/api/auth/recover-pass: 0 Unknown Error","error":{"isTrusted":true}}
I readed it can be an CORS error, but I don't think so. I'm using this
app.use((req, res, next) => {
res.setHeader("Access-Control-Allow-Methods", "POST, PUT, OPTIONS, DELETE, GET");
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, x-access-token");
res.header("Access-Control-Allow-Credentials", true);
next();
});
Related
When I perform certain requests, I get this error :
Access to XMLHttpRequest at 'https://myApi/myRoute' from origin 'http://localhost:19006' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
but my app is configured like this :
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "http://localhost:19006");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
res.header('Access-Control-Allow-Credentials', 'true');
next();
});
If I use this syntax I get the same problem :
app.use(cors({
origin: true, credentials: true
}));
How it is possible that certain requests like login etc .. are ok, but some other are not ?
I work on expo for a react native app in web browser version.
I am running a server with express at port 3000 and a client with angular 7 at port 4200. Once I make a request, I run into CORS issue.
Access to XMLHttpRequest at 'http://localhost:3000/drug' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I have tried all the solutions online like using cors package, and setting the middleware before router like below codes (Angular 6 - No 'Access-Control-Allow-Origin' header is present on the requested resource). But it still is not solved and keep getting same errors. Does anyone have same problem that CORS is not solved with all the solutions? Could you please help me?
app.use((req, res, next) => {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
res.header(
"Access-Control-Allow-Header",
"Origin, X-Requested-With, Content-Type, Accept"
);
next();
});
app.use((req, res, next) => {
res.header("Access-Control-Allow-Origin", "http://localhost:4200");
res.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
res.header(
"Access-Control-Allow-Header",
"Origin, X-Requested-With, Content-Type, Accept"
);
next();
});
Put this line of code app.use(cors()); before routing code. (Assuming you have installed cors package).
I think answer would be so late, but for somebody in future:
You have to turn it on at the server side.
I'm .Net developer, therefore I'll show in example of .Net core app.
In startup file method ConfigureServices you should add next code
services.AddCors(options =>
{
options.AddPolicy("CorsPolicy",
builder => builder.WithOrigins("http://localhost:4200")
.AllowAnyMethod()
.AllowAnyHeader()
.AllowCredentials());
});
After that you should edit method Configure. Add next line before calling UseMvc
app.UseCors("CorsPolicy");
That's all. I hope this answer will help to somebody.
While reading some tutorial I found that
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header('Access-Control-Allow-Methods', 'DELETE, PUT');
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
What does every res.header mean? and what are their functions?
These headers allow cross-domain access: https://ru.wikipedia.org/wiki/Cross-origin_resource_sharing
Without these headers client scripts are allowed to get data from your server (edited: in your case you specify request types DELETE and PUT) only if their origin is the same (i.e. your client-side html and javascript are loaded from the same domain name). Scripts from different domains will receive an error like 'this origin is not allowed' or something like that.
WebSocket connection to 'ws:// failed:
Error during WebSocket handshake:
Unexpected response code: 400 socket.io-1.2.0.js:2
Any suggestions for this, irrespective of research I couldn't find any solution to this problem,
any idea what went wrong on this and how can it be fixed
Node.js
app.use(function(request, response, next){
response.header("Access-Control-Allow-Origin", "*");
response.header("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE");
response.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, X-Auth-Token");
next();
});
I have a CORS problem with my app.
My stack is Node.js with Express 4 and AngularJS using Restangular
I already have tried a few things (for example) but I keep getting:
XMLHttpRequest cannot load http://localhost:8080/api/users. Request header field Content-Type is not allowed by Access-Control-Allow-Headers.
In the server side I have this headers:
app.all('/*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods", "GET, POST","PUT");
next();
});
In the AngularJS part I am using this:
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
And I am doing the post with Restangular like this:
var baseUsers = Restangular.all('users');
....
....
baseUsers.post(newUser).then(function(user){
console.log(user);
});
One more thing, in the Node.js server I am consoling the req.method and it says OPTIONS, I really don't know why.
Perhaps is something silly, hope someone can help me.
Thanks!
Change -
res.header("Access-Control-Allow-Headers", "X-Requested-With");
TO
res.header("Access-Control-Allow-Headers", "X-Requested-With, Content-Type");
Source 1
Source 2
I am posting same answer with a detailed code, Because i got some issues when i use the selected answer.
Just pull the code below after initialization of the app object
app.all('/*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With, Content-Type");
res.header("Access-Control-Allow-Methods", "GET, POST","PUT");
next();
});
I hope this will be little bit more helpful.