I'm using $http.get() to commit an API request which works just fine as long as I enable CORS in my browser while testing. Of course, that's just a bandaid.
I found this article:
Angular $http.get: How to catch all the errors?
And have my code set up with a then().catch() and while the catch code is executed as expected, the error is still thrown:
XMLHttpRequest cannot load 'url here' due to access control checks.
Even when I manually disable CORS for development's sake, I still get 401 errors, despite my catch().
The goal is prevent the old "red text" errors in the console and just handle them with an alert to the user.
When you send an http request in a browser, it first sends OPTIONS request which is called preflight. The browser blocks the request if the response for the preflight request doesn't contain Access-Control-Allow-Origin headers.
This preflight request is transparent to Javascript. So, for every ajax call, the browser sends two requests if the destination is cross-domain.
Even though you catch the error, browser is going to report the network error in the console if the preflight request fails.
Related
I have followed this step to setup my server to enable CORS.
https://learn.microsoft.com/en-us/aspnet/web-api/overview/security/enabling-cross-origin-requests-in-web-api
But now in my browser dev console, I see this error message:
XMLHttpRequest cannot load https://serveraddress/abc. Response for
preflight is invalid (redirect)
Do you know what can I do to fix it? I am making a CORS request in HTTPS. I think that is causing the 'preflight is invalid (redirect)' failure. But I don't know why or what is redirecting the OPTIONS request.
Thank you.
Short answer: Ensure the request URL in your code isn’t missing a trailing slash.
A missing-trailing-slash problem is the most-common cause of the error cited in the question.
But that’s not the only cause — just the most common. Read on for more details.
When you see this error, it means your code is triggering your browser to send a CORS preflight OPTIONS request, and the server’s responding with a 3xx redirect. To avoid the error, your request needs to get a 2xx success response instead.
You may be able to adjust your code to avoid triggering browsers to send the OPTIONS request.
As far as what all’s going on in this case, it’s important to know browsers do a CORS preflight if:
the request method is anything other than GET, HEAD, or POST
you’ve set custom request headers other than Accept, Accept-Language, Content-Language, Content-Type, DPR, Downlink, Save-Data, Viewport-Width, or Width
the Content-Type request header has a value other than application/x-www-form-urlencoded, multipart/form-data, or text/plain
If you can’t change your code to avoid need for browsers to do a preflight, another option is:
Check the URL in the Location response header in the response to the OPTIONS request.
Change your code to make the request to that other URL directly instead.
The difference between the URLs might be something as simple as a trailing slash in the path — for example, you may need to change the URL in your code to add a trailing slash — e.g., http://localhost/api/auth/login/ (notice the trailing slash) rather than http://localhost/api/auth/login (no trailing slash) — or you might instead need to remove a trailing slash.
You can use the Network pane in browser devtools to examine the response to the OPTIONS request and to find the redirect URL in the value of the Location response header.
However, in some cases, all of the following will be true:
you’re not able to avoid the preflight OPTIONS
you’re not able to make any adjustments to the request URL
you’re not able to replace the request URL with a completely different URL
A common case with those conditions is when you try to work with some 3rd-party endpoint that requires an OAuth or SSO workflow that’s not intended to be used from frontend code.
In such cases — in all cases, actually — what’s essential to realize is that the response to the preflight must come from the same origin to which your frontend code sent the request.
So even if you create a server-side proxy that you control:
If your browser sends a preflight OPTIONS request to your proxy.
You’ve configured the proxy such that it just redirects the request to a 3rd-party endpoint.
Thus, your frontend ends up receiving a response directly from that 3rd-party endpoint.
…then the preflight will fail.
In such a case ultimately your only alternative is: ensure the preflight isn’t just redirected to the 3rd-party endpoint but instead your own server-side (proxy) code receives the response from that endpoint, consumes it, and then sends a response of its own back to your frontend code.
This happens sometimes when you try calling an https service as http, for example when you perform a request on:
'http://example.com/api/v2/tickets'
Which should be:
'https://example.com/api/v2/tickets'
First of all, ensure that you have "Access-Control-Allow-Origin": "*" in the headers
then just remove "/" at the end of url
e.g. change
url: "https://facebook/api/login/"
into
url: "https://facebook/api/login" (without '/')
In my case I did not have to set the request header to have "Access-Control-Allow-Origin": "*". The url HAD TO be ending with a "/" at the end
in my case i also solve this preflight request by just putting one slash (/) at the end of the api
#django #reactJs
The CORS request was responded to by the server with an HTTP redirect to a URL on a different origin than the original request, which is not permitted during CORS requests.
For example, if the page https://service.tld/fetchdata were requested, and the HTTP response is "301 Moved Permanently", "307 Temporary Redirect", or "308 Permanent Redirect" with a Location of https://anotherservice.net/getdata, the CORS request will fail in this manner.
To fix the problem, update your code to use the new URL as reported by the redirect, thereby avoiding the redirect.The CORS request was responded to by the server with an HTTP redirect to a URL on a different origin than the original request, which is not permitted during CORS requests.
For example, if the page https://service.tld/fetchdata were requested, and the HTTP response is "301 Moved Permanently", "307 Temporary Redirect", or "308 Permanent Redirect" with a Location of https://anotherservice.net/getdata, the CORS request will fail in this manner.
To fix the problem, update your code to use the new URL as reported by the redirect, thereby avoiding the redirect.
In my angular app, i am trying to do basic HTTP auth.
I send the http get request from angular without any credentials initially, as i assume that when the backend sends a 401 status, the browser would ask me for credentials and would then resubmit the request on its own.
But the browser login prompt is never displayed.
This is the error that i get:
angular.js:11756 GET http://localhost:8080/appName/rest/keys/Keys?batch=0&userName=Test 401 (Unauthorized)
These are the headers i get for response:
Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:origin, content-type, accept, authorization
Access-Control-Allow-Methods:GET, POST, PUT, DELETE, OPTIONS, HEAD
Access-Control-Allow-Origin:http://localhost:3001/
Content-Length:0
Date:Tue, 09 Aug 2016 14:53:26 GMT
Server:Apache-Coyote/1.1
WWW-Authenticate:Basic
I was hoping that the browser prompt would appear automatically when it encounters status 401, but it doesn't seem to be the case here. Am i missing something?
EDIT:
It does not work in Chrome and Firefox, but works in IE, IE displays a login prompt when i try to access the url, and works correctly with username and password, while Chrome directly gives a 401 error.
If i try to access the server url directly from address bar, then Chrome displays the login prompt and asks me for the credentials.
Not sure, but can it be a CORS issue?
Ok, i was able to resolve the issue.
The problem was indeed related to CORS, not in a direct way.
Also, it was working on IE since IE does not respect CORS and will anyways let you access cross origin.
Two things were missing:
Initially i was sending (along with other headers) Access-Control-Allow-Origin : * from the server, for enabling CORS.
Then i got to know this:
Firefox and Chrome require exact domain specification in
Access-Control-Allow-Origin header. For servers with authentication,
these browsers do not allow "*" in this header. The
Access-Control-Allow-Origin header must contain the value of the
Origin header passed by the client.
https://www.webdavsystem.com/ajax/programming/cross_origin_requests/
And then there was an issue related to cross origin browser auth:
By default, in cross-site XMLHttpRequest invocations, browsers will
not send credentials. A specific flag has to be set on the
XMLHttpRequest object when it is invoked.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Requests_with_credentials
This specific flag is withCredentials : true, which needs to be set with the xhr request. I managed to set it with my http request from the angular app, and voila it worked!
I'm currently deploying a basic API to my live server and I'm running into (what I think is) a CORS problem but there is some behavior going on that I can't explain.
I'm communicating from an AngularJS front-end to a Laravel 5 (+ laravel-cors) back-end.
I started testing with a simple jQuery AJAX call (below) and when I make a request from my local Vagrant environment (http://dev.example.local/test.html) to http://api.example.com/v1/matches I get an error about Access-Control-Allow-Origin. The weird thing is that the request does come through because the information is stored in the database via the Laravel-based API correctly.
$.ajax({
method: 'POST',
url: 'http://api.example.com/v1/players',
data: {
"username": "username",
"first_name": "First",
"last_name": "Last",
"nickname": ""
}
}).always(function(r) {
console.log(r);
});
Error:
XMLHttpRequest cannot load http://api.example.com/v1/players. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://other.example.com' is therefore not allowed access.
The console.log(r) returns {readyState: 0, responseJSON: undefined, status: 0, statusText: "error"}
I developed the application locally using a Homestead VM (API) and a Vagrant environment (application) and it's working correctly within these environments...
Some observations:
Each of these requests shows up with Method: POST, Status: 200 OK, Type: xhr in my Chrome Developer Tools.
Tools like Postman and PhpStorm's RESTful service tester correctly execute the request and the data is added without errors.
Any ideas on how to further debug this problem are welcome... I've been trying to wrap my head around this for the entire day now and I just don't know what's causing it.
Your server must return an appropriate Access-Control-Allow-Origin header in the response. For example, if the request is being sent from http://stackoverflow.com, then your server must return this header: Access-Control-Allow-Origin: http://stackoverflow.com. You can determine, server-side, what the origin is by looking at the Origin header on the request. If your server does not return this header in the response, you will not have any access to the properties of the response browser-side (such as the status code, headers, or message body). The Same Origin Policy is at the center of this restriction.
The reason you are not seeing any similar issues when the request is sent by Postman or PhpStorm's RESTful service tester is due to the fact that these services do not send an Origin header with the request, as they are not subject to the Same Origin policy. By default, the browser will append this header to any cross-origin ajax requests, as browsers are subject to the Same Origin Policy. In my previous scenario, the request header would look like this: Origin: http://stackoverflow.com. Browsers that implement the CORS spec are required to add this request header so the server is able to determine if the origin of the request has been whitelisted for cross-origin ajax requests. If this is the case, the server will return the proper Access-Control-Allow-Origin header. If not, it can simply omit the header. Browsers that do not implement the CORS spec will simply refuse to send such an ajax request.
Regarding your bewilderment as to why the request is being sent in the first place, that comes down to a distinction between "simple" and "non-simple" CORS requests. For simple CORS requests, the request will always be sent to the server, but the client/JS will not be able to parse the response without proper acknowledgement from the server. Some CORS requests are not simple, so to speak. These are, for example, DELETE or PATCH requests, or POST/GET requests that contain non-standard headers (such as X-headers or a Content-Type of "application/json" as opposed to "multipart/form-data"). In other words, a request is not simple if it cannot be sent without JavaScript. For example, a <form> submit, or a GET request from a <script src="..."> will always send "simple" requests. For non-simple requests, the browser must "preflight" the request. This means that the browser sends an intermediate request, called a preflight, before the original request. This preflight request is an OPTIONS request. The server must than return headers in the response to this preflight that acknowledge any non-standard properties of the original request. If it does, then the browser will send the original request.
You can read more about preflighting and CORS in general on MDN.
this is a similar question to this post in SO.But the answer provided here cannot be applied in my case as i cannot change the response headers from server.
Suppose an http POST to a different origin. This implies CORS, including a CORS preflight exchange. Now suppose the OPTIONS request returns a 503 service unavailable error due to a server problem. In this case the error handler gives ""for data and 0 for status instead of giving me the status code 503 and the text:service not available. An example of this scenario is illustrated in the below image.
I am using angularjs $http and i know in the response there are no CORS header if such errors happen.and i cannot change it.
Is there any way i can receive the proper error code and the text in my rejection object.
This is not an issue of AngularJS / $http but it is the behavior of the browsers and their XMLHttpRequest object: If the CORS request fails, the browser does not give any information back to the caller.
Before I got this understanding, I also though it to be an AngularJS issue and I raised an open issue on github of Angular -> with the corresponding comment.
https://github.com/angular/angular.js/issues/13085#issuecomment-148047721
So I think there seems no other way to solve this as to add the Access-Control-Allow-Origin response header also on the proxy / load balancer in case of 503.
Edit:
If your load balancer is a HAproxy, the following may help you too:
HAproxy: different 503 errorfile for OPTIONS and POST methods
It shows how to let HAproxy anwer the CORS requests autonomous.
I'm trying to figure out how to prevent the OPTIONS call from firing on every GET call to our API server.
I'm trying this right now:
.config(function(RestangularProvider) {
RestangularProvider.setDefaultHeaders({"X-Requested-With" :"", "Content-Type": "text/plain"});
})
But it's not doing me any good. Everything still thinks it's application/json so it fires off the preflight call. Is there anything I can do?
Check this out:
OPTIONS requests are what we call pre-flight requests in Cross-origin
resource sharing (CORS).
They are necessary when you're making requests across different
origins.
This pre-flight request is made by some browsers as a safety measure
to ensure that the request being done is trusted by the server.
Meaning the server understands that the method, origin and headers
being sent on the request are safe to act upon.
Your server should not ignore but handle these requests whenever
you're attempting to do cross origin requests.
How to disable OPTIONS request?