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.
The restangular docs states that the API with CORS error fails with a status code of 0, but mine is failing with -1.
From the docs:
This is typically caused by Cross Origin Request policy. In order to enable cross domain communication and get correct response with appropriate status codes, you must have the CORS headers attached, even in error responses. If the server does not attach the CORS headers to the response then the XHR object won't parse it, thus the XHR object won't have any response body, status or any other response data inside which typically will cause your request to fail with status code 0.
I have looked into similar questions on SO, but couldn't find anything related to this.
For my personal website, I'd like to create a page summarizing my social presence.
I used Postman to make sure all my queries are valid.
So I made simple call to get my last post on twitter.
Everything works find on Postman, so there isn't any Authorization issues.
But when it comes to implement it on my client (using AngularJs ), I'm getting this error:
OPTIONS https://api.twitter.com/1.1/statuses/user_timeline.json?user_id=1106474965 400 ()
XMLHttpRequest cannot load https://api.twitter.com/1.1/statuses/user_timeline.json?user_id=1106474965. Response for preflight has invalid HTTP status code 400
I know it may be related to How does Access-Control-Allow-Origin header work? but I can't configure the server as I subscribed a shared hosting
(One.com).
I tried to reset my $httpProvider default values in vein.
It seems Twitter API doesn't support CORS headers, and that's why your preflight tests are failing:
https://twittercommunity.com/t/will-twitter-api-support-cors-headers-soon/28276
I'm working on an AngularJS Application which uses an external API and I got a weird issue (CORS). I made a lot of research that does not fix the issue.
When I hit my API the preflight request is good (status 204 No-Content),
but when the server responds with a another status code than 2xx (200, 204 etc...) I got the CORS issue.
If my server send back 2xx as status code is alright we have no CORS issue but if another status code is sent here is the problem.
API :
Sylex(PHP Framework) running under Nginx
Front application :
AngularJS - using webpack
XHR VIEW :
Console CORS Error :
After a day of search I figured out where the CORS was coming from.
The Nginx configuration was ok. It was the API.
During the preflight request (OPTIONS) the server let passed the request because NGINX allowed the origin and header (access-control-allow-origin, access-control-allow-headers),
but when the API sends back the response the headers were not set up.
I fixed it by adding the access-control-allow-origin and access-control-allow-headers to the response.
IMPORTANT: I figured out data weren't recoverable in the response with the 200 status code on the webbrowser. To fix it remove the headers added in the others responses (5xx, 4xx, etc..)
(I don't know if its just in my case)
I haven't developed the API that's why it takes me a day to figure it out. Hope I will help someone with this use case :)
I'm new to AngularJs and Ionic. Building a schedule app just to practice so please go easy on me.
I don't know why I'm getting this 405 response. I tried to do a GET request with postman with the same information and it worked, but it doesn't work with my AngularJs code.
NOTE: I changed my access token (From UW) for safety.
Here's postman:
Here's my angular service:
and here's the error I'm getting when I run the ionic app:
You have a cross origin policy problem.
Add these headers to your webserver and you should be all set:
Access-Control-Allow-Methods: GET,PUT,POST,DELETE,OPTIONS
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Content-Type
Don't forget to modify scope to suit your need.
== update ==
I just checked the link. The server is IIS 8.5
So I think this link you may find it helpful: http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api
A 405 is a problem with the server angular is trying to talk to. Essentially, the request you made was matched to a route, but your server will not allow that route to execute.
Specifically, for your problem (and this is just my best assumption) ws.admin.washington.edu requires users to sign in. Your request is not authenticated.