I'm trying to follow AngularJS $http, CORS and http authentication to get filter results from JIRA and I can't make it work.
If I use the GET method, the console reports:
XMLHttpRequest cannot load
https://.../rest/api/2/search?jql=filter=28203.
Response to preflight request doesn't pass access control check: No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'null' is therefore not allowed access.
Even though I've set useXDomain.
If I use the JSONP method, my success callback never gets invoked. I've tried .success, .then, and JSON_CALLBACK and none work. While JSONP isn't suppose to work at all in modern JIRA, I can see a successful response with the expected data in Chrome's Developer Tools' network work tab but the console reports:
Refused to execute script from
'https://.../rest/api/2/search?jql=filter=28203' because its MIME type
('application/json') is not executable, and strict MIME type checking
is enabled.
My code -- based on that from the CORS question above -- is at https://plnkr.co/edit/IO4air3eN2vDoaOXJous?p=preview
What am I missing?
Related
Using CefSharp version 71.
While making fetch() call from JavaScript, it should ideally make the pre-flight OPTIONS call before making the GET/POST call.
But it doesn't actually make it.
But if I try it in the Chrome browser, it does.
Tried this on Chrome browser, and it does make the pre-flight OPTIONS call.
The result of this is, since OPTIONS call is not made, CORB is stopping the response.
The error is:
Cross-Origin Read Blocking (CORB) blocked cross-origin response https://some-api.com/blah with MIME type application/json. See https://www.chromestatus.com/feature/5629709824032768 for more details.
It looks like WebSecurity is set to disabled in your BrowserSettings.
browserPlay.BrowserSettings = new BrowserSettings()
{
WebSecurity = CefState.Disabled
};
Steps to Reproduce:
Add the above code in the application
Make a cross origin GET Request, notice that the request is made without "Origin:" header and Response does not have CORS headers.
In console, you will see the following CORB error: Cross-Origin Read Blocking (CORB) blocked cross-origin response
I tested the above on CEF version 73.1.13
This question already has answers here:
Why doesn't adding CORS headers to an OPTIONS route allow browsers to access my API?
(36 answers)
How does the 'Access-Control-Allow-Origin' header work?
(19 answers)
No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API
(26 answers)
Closed 4 years ago.
im trying to make a simple request to an API
fetch('someurl').then((data) => console.log(data))
but im getting the classic No 'Access-Control-Allow-Origin' header is present on the requested resource.
how can I fix this on the client side? or is the only way to fix it for the API author to change it and add the correct response headers?
To deepen you understand on CORS have a look at MDN's article on Cross-Origin Resource Sharing (CORS). It's pretty extensive.
Using jsonP you would be able to work around this when making simple GET requests. See also this older, short and sweet article that explains it in more detail. How JSONP Works.
The Wikipedia Definition of JSONP is as follows:
a communication technique used in JavaScript programs which run in Web
browsers. It provides a method to request data from a server in a
different domain, something prohibited by typical web browsers because
of the same origin policy.
With that in mind, let look at the following example and make the request.
$(document).ready(function() {
$.getJSON("https://jsonplaceholder.typicode.com/users?callback=?", function(json){
console.log('getJSON call: ', json);
});
})
FETCH does not support jsonp
After a bit of research, it does turn out that the Fetch API does not support jsonP requests. If you have a look at this jsFiddle example you'll see that the $.getJSON call returns data when used with the suffix ?callback=? while the 'fetch()' call fails and returns a CORS message. Open the console to see the result of both calls.
Your question in the comments
Also, do you know why fetch({ url : 'https://randomurl" }) would not
get a CORS blockage but fetch('https://randomurl') would?
The first argument you provide to fetch is a string/URL, the second (optional) argument can be an options object {}. Because you provide an object as the first argument, that URL cannot be found. The reason why it doesn't give you a CORS blockage is because you provided an invalid URL, which returns a 404 status. Fetch deals with page cannot be found errors by returning a 200 OK status and in the JSON returned it will provide you with more info.
The Promise returned from fetch() won’t reject on HTTP error status
even if the response is an HTTP 404 or 500. Instead, it will resolve
normally (with ok status set to false), and it will only reject on
network failure or if anything prevented the request from completing.
Source: MDN docs
I hope this helped a bit in broadening your understanding of CORS and the how Fetch works.
You can find some workaounds in Why does my JavaScript get a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error when Postman does not? but you can't solve the problem from the client. It must be solved on server by setting correct headers that allow it...
I'm running an ionic application using ionic serve on port 8080. I do understand the preflight process and I believe I'm getting the right response:
Still, I'm getting this error:
Failed to load https://bla.bla: 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'. Origin 'http://localhost:8080' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
Then, the real request (GET) is not being sent.
What is even weirder is that just before this one request, I'm able to send a POST to the same server. The response headers are the same. The only difference in the request is that the Access-Control-Request-Headers is content-type instead of authentication
Any ideas?
Finally found the answer and it was my fault, not a chrome bug.
Thing is, some time ago I tried using this extension:
https://chrome.google.com/webstore/detail/cors-toggle/jioikioepegflmdnbocfhgmpmopmjkim?hl=en
And it didn't work for my needs, but I forgot to uinstall it. Turns out it was having some kind of conflict, since it seems to add an "Access-Control-Allow-Origin: *" header for every response. Thus it would conflict in a request with credentials (I'm guessing the Authentication header does that, not sure why tbh).
Anyway, after I uninstalled it, it's now working fine.
This question already has answers here:
XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header
(11 answers)
Closed 5 years ago.
I'm encountering a bit of a strange issue when making an Ajax cross domain request. I get the following error in the console of chrome dev tools:
No 'Access-Control-Allow-Origin' header is present on the requested resource error
However, when I look at the network requests, it passes the browsers CORS preflight request because request changes from OPTIONS which it was when it was failing preflight request to GET, and the response is as I would get via postman. However, the Ajax failure message is triggered so even though in dev tools the request appears to succeed, I can't access the successful response via the JavaScript.
Additional info is that the file that is making the ajax request is just an HTML file with inline JavaScript that I open directly from the file directory. I'm thinking this might be my problem but couldn't find anything that explicitly says this so I am wanting confirmation.
Note with respect to the API: the appropriate access control headers are set
You have to pass some (if not all, I haven't checked) with every response, not only the response to the pre-flight OPTIONS request.
I am trying to retrieve data from an API using Jquery's ajax(), but it doesn't work with this implemenation:
$.ajax('http://api.forismatic.com/api/1.0/?method=getQuote&format=json').done(function(data) {
alert(1);
alert(JSON.stringify(data));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
After running the code the alert function doesn't work, so I concluded that the success callback function isn't working, but I have no idea why.
After inspecting the server response headers, there is no Access-Control-Allow-Origin, this means that the server doesn't allow cross-origin access. Since you make a cross-origin HTTP request, your request will be rejected by the browser following the Same-origin policy:
The same-origin policy restricts how a document or script loaded from
one origin can interact with a resource from another origin. It is a
critical security mechanism for isolating potentially malicious
documents.
Look at your console you will see the following error (Chrome):
XMLHttpRequest cannot load
http://api.forismatic.com/api/1.0/?method=getQuote&format=json. No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://s.codepen.io' is therefore not allowed
access.
For more details please refer to: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS