I have a form in my angular app in which user are required to provide a valid url.
Therefore when submitting the form, I'd like to test if the URL is valid by making a get request to the url provided and check if the server sends 200.
When a click the submit button, the following code is run:
$http.get(scope.target_url).success(function(){
// some code
}).error(function(error){
console.log(error);
});
However, I never get a successfull answer:
- if I provide a url like: 'http://www.somesite.com', I get:
XMLHttpRequest cannot load 'http://www.somesite.com'. Received an invalid response. Origin 'mydomain' is therefore not allowed access.
if I provide a url like: 'http://somesite.com', I get:
XMLHttpRequest cannot load http://somesite.com/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'mydomain' is therefore not allowed access.
Where does the problem come from?
That is normal security constraints. Read about CORS here:
http://en.wikipedia.org/wiki/Cross-origin_resource_sharing
Related
I am attempting to read the redirect URL from a 3xx redirect. (I'm planning on just reading the location: https://myredirectedurl.com header and handling it myself in JS. However when I make the fetch request i recieve
Access to fetch at 'https://myredirectedurl.com' (redirected from 'https://localhost:8000/somepath') from origin 'https://localhost:8000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
I know why this error is raised and I do understand how CORS works. However I do not want the fetch function to execute the redirect.
I read on this stackoverflow question that the redirect: 'manual' property may help if it is set. This does stop the CORS error from appearing and stops the redirected request, however I am now unable to read the location: https://myredirectedurl.com header. I wish to read this so I can handle the redirect based on my application logic and then possibly use window.location.replace
I just wanted to update incase anyone stumbles here from a search engine. It is not possible. The browser transparently redirects before the client javascript can even interact with it. The recomended way to handle this is to use som 2xx status for the redirect and then read the redirect url from either a header or the content.
I am trying to access a Google Apps Script WebAPI from my website using javascript to pass some value and create an excel file and download it through this API.
I tried 2 following way:
Using POST request with $.post.
My values are many. So, at first, I use a POST request with a body is JSON of list values. Browser rejects API response, because of CORS error.
I researched about CORS to understand it. At some topics, I found a solution is the following second way.
Access to XMLHttpRequest at 'https://script.google.com/macros/s/xxxxxxx' from origin 'https://example.com' 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.
Using GET request with $.getJSON.
I pass JSON of list values to URL parameter and make GET request. It worked fine.
var url = 'https://script.google.com/macros/s/' + api_id + '/exec?' + request_parameter_string;
$.post(url, payload, function(data, textStatus) {
// Do something
}, 'json');
$.getJSON(url, function(json_result) {
// Do something
})
.fail(function() {
// Do something
});
What I do not understand is why? Why it works with getJSON but not work with post?
I think CORS work with both of GET and POST requests. And I checked the response header with Postman. The headers are the same Access-Control-Allow-Origin →*.
I think have something is different inside getJSON and post functions.
*UPDATE: Update POST CORS error message.
GET requests are not bound by CORS we can host images and static files in CDN which is different from the origin and would help in improving the performance by caching and making parallel requests.
Similarly GET is used for serving ads, trackers and analytics from third party domains as well.
More information about Same Origin Policy and GET is at https://security.stackexchange.com/a/16221/9517
How the browsers identify Other HTTP Verbs are allowed for the cross origin request is elaborated # https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request
This question already has answers here:
XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header
(11 answers)
Closed 3 years ago.
I've found simple tutorial how to make cross domain json call here
And it works perfectly fine, so i decided to use this example, just change url from:
var url = "http://api.myjson.com/bins/23xvb";
to
var url = "http://dl.sniper.pl/test.json"
Unfortunately changing it returns such an error (in chrome):
XMLHttpRequest cannot load http://dl.sniper.pl/test.json. 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.
Googling that error didnt provide any answers to find a solution so here's the question:
Why i get such an error and how to solve it?
The http://dl.sniper.pl/ server must be configured to send the Access-Control-Allow-Origin response header in responses to requests for http://dl.sniper.pl/test.json.
But because that server isn’t sending the Access-Control-Allow-Origin response header, your browser is refusing to allow your frontend JavaScript code to access that response.
So you either nust configure the http://dl.sniper.pl/ server to send Access-Control-Allow-Origin or else you can make the request through a CORS proxy.
There’s an open CORS proxy you can make you request through by changing your code to this:
var url = "https://cors-anywhere.herokuapp.com/http://dl.sniper.pl/test.json"
That sends the request through the open CORS proxy https://cors-anywhere.herokuapp.com which adds the Access-Control-Allow-Origin response header to it and then passes that back to your requesting frontend code as the response.
That response with the Access-Control-Allow-Origin response header is what the browser sees, so the browser allows your frontend JavaScript code to actually access the response.
You can also easily set up your own CORS proxy using https://github.com/Rob--W/cors-anywhere/
See https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS for an explanation of how browsers behave when you send cross-origin requests frontend JavaScript code using XHR or the Fetch API or AJAX methods from JavaScript libraries—and for details about what response headers must be received in order for browsers to allow frontend code to access the responses.
you should configure you server todo this in your htaccess
u need something like this
<RequireAll>
Require all granted
</RequireAll>
I am trying to access the JSON metadata corresponding to Python packages in the form http://pypi.python.org/pypi/<package_name>/json using JavaScript.
My code looks something like this:
var name = $('#name').val();
var url = 'http://pypi.python.org/pypi/' + name + '/json';
$.getJSON(url, function(result){
console.log(result);
});
The problem is that the url for the json is case sensitive, so for example, pypi.python.org/pypi/flask/json gets redirected to pypi.python.org/pypi/Flask/json since the package 'Flask' needs to have a capital F.
Thus, if name is flask, I get the error XMLHttpRequest cannot load https://pypi.python.org/pypi/flask/json. Redirect from 'https://pypi.python.org/pypi/flask/json' to 'https://pypi.python.org/pypi/Flask/json' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
Any idea on how to properly access the json even if the package name has the wrong capitalization?
If you make the request through an open CORS proxy it should work; try changing your code to:
var url = 'https://cors-anywhere.herokuapp.com/http://pypi.python.org/pypi/'
+ name + '/json';
That sends the request through https://cors-anywhere.herokuapp.com, an open CORS proxy which adds the Access-Control-Allow-Origin response header to it and then passes that back to your requesting frontend code as the response.
That redirect response with the Access-Control-Allow-Origin response header is what the browser sees, so the browser will actually follow the redirect instead of stopping.
All the said, it seems like the pypi.python.org site should really be including the Access-Control-Allow-Origin response header in their 3xx redirect responses, so you might consider filing a bug at https://sourceforge.net/p/pypi/support-requests/ requesting that they do.
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