I have a Ruby On rails Json API. I also have an AngularJS frontend and I am making CORS requests.
Everything works ok when I return 200 (for example on posts it's actually calling OPTIONS method and getting cors headers for the server). But when I return 401 (unauthorized) I get a Cross site error. I want to handle this error and show an appropiate message (when the user is not authorized to execute a method) but it seems that 401 response fires CORS error.
Any help?
CORS is independent of authentication. Your should layer your CORS response on top of your actual response. So in the case of an authentication error, here's how you should respond:
The preflight response (e.g. the response to the OPTIONS request) should always return HTTP 200, along with the appropriate CORS headers: Access-Control-Allow-Origin, Access-Control-Allow-Methods and Access-Control-Allow-Headers (if necessary). There should be no body on the preflight response.
The actual response should respond with 401, if there is an auth error. But it should still have the CORS headers, e.g. Access-Control-Allow-Origin etc.
This tells the browser that the cross-origin request was successful, but there was an underlying issue with the request (e.g. the auth error).
Related
I'm using Vue CLI and axios.
I have a searchbar where the user can input (potentially) any website and read info about the HTTP request and response.
Some of the information I need to get are: HTTP protocol, Status code, Location (if redirected), Date and Server.
What I'm doing is a simple axios GET request taking the input from the searchbar.
I'm trying to get my head around the CORS domain issues, but even then, when I input a CORS supported site like myjson I can access only the CORS-safelisted response headers which are not what I'm looking for.
This is the axios call:
axios
.get(url)
.then((r) => {
console.log(r);
console.log(r.headers.server); //undefined
})
.catch((e) => {
console.error(e);
});
Is the brief I'm presenting even possible?
UPDATE
I've then tried removing the chrome extension I used to enable CORS requests and installed Moesif Origin & CORS Changer extension. After restarting my PC I have now access to the remaining response headers.
I don't really know exactly what went wrong with the previous extension, but hopefully this helps somebody.
It's also worth pointing out that at the current date I'm writing this edit, myjson site has been flagged by chrome as non-safe for privacy issues. I've simply made HTTP requests to other sites and got the response headers as described.
The response to a cross-origin request for https://myjson.dit.upm.es/about contains the CORS-related headers
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, PATCH, PUT, DELETE, POST, OPTIONS
but no Access-Control-Expose-Headers. Without that, a cross-origin client cannot access the Server header, because it is not CORS-safelisted.
It would work if you had your server make the request and evaluate the headers, not the axios client.
I do have a question regarding Graphql, i made it work but when we changed our domain from ".myshopify" to "custom" domain, it stopped working, it returns a error 400.
Here's the complete error.
OPTIONS https://testwebsite.myshopify.com/admin/api/graphql.json 400
Access to XMLHttpRequest at 'https://testwebsite.myshopify.com/admin/api/graphql.json' from origin 'https://testwebsite.com.au' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Hope you can give me an answer.
Thank you
I have implemented Cors policy in dot net core application:
In Startup.cs under ConfigureServices I have added the following cors policy
services.AddCors(options =>{
options.AddPolicy("CorsPolicy",
builder => builder.AllowAnyOrigin()
.AllowAnyMethod()
.AllowAnyHeader()
.AllowCredentials());
});
I'm facing a strange issue after adding CORS policy, on every POST call from UI there are two calls made: first calls returns with 204 and other call returns the data with 200 status code.
First one is a preflighted request. The main goal is to determinate whether the actual request is safe to send. Cross-site requests are preflighted since they may have implications to user data.
A CORS preflight request is a CORS request that checks to see if the CORS protocol is understood.
It is an OPTIONS request using two HTTP request headers: Access-Control-Request-Method and Access-Control-Request-Headers, and the Origin header.
A preflight request is automatically issued by a browser when needed.
This HTTP access control (CORS) describe conditions that if true then request is preflighted.
I can make a request from postman but when I make the same exact request (I'm talking about even copying the code from postman) I get an error.
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://glacial-stream-35306.herokuapp.com' is therefore not allowed access.
Even with the cors-eveywhere chrome extension and attempting to use jsonp I cannot get it to work. Even though the request goes through every time on postman.
What makes a postman req different from a request from a Heroku app?
I am trying to use the Aurelia HttpClient to call the TagniFi API on a different domain (and authenticating). The relevant code is:
return this._httpClient.createRequest(uri)
.asGet()
.withCredentials(true)
.withHeader('Access-Control-Allow-Origin', 'localhost:9000')
.withHeader('Authorization', 'Basic <my-key>')
.send();
I do receive a status 200 from the API, but I get the following error:
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://localhost:9000' is >therefore not allowed access. The credentials mode of an XMLHttpRequest >is controlled by the withCredentials attribute.
I am not sure if this is a error in the way I am making the call or a bug in Aurelia. Any help is appreciated. Thanks.
The Access-Control-Allow-Origin is an header sent in the response by the server and in your case you use it in the request from the client.
It's not a bug in Aurelia but a misuse of CORS.
See this excellent answer for more information on CORS.