XmlHttpRequest cross-domain [duplicate] - javascript

This question already has answers here:
Ways to circumvent the same-origin policy
(8 answers)
Closed 9 years ago.
Im trying to make requests to a remote Rest (put method) api
var xhReq = new XMLHttpRequest();
xhReq.open("PUT", "http://api-easybib.apigee.com/2.0/rest/cite", true);
xhReq.setRequestHeader('Content-Type', 'application/json');
var jsonString = "{...}";
xhReq.send(JSON.stringify(jsonString));
var serverResponse = xhReq.responseText;
it fails with
No 'Access-Control-Allow-Origin' header
although i succeeded to make call via rest client browser plugins.
What am i missing?

Because cause security, all browser are not accept a ajax cross-origin request from your site.
In order to browser accept a ajax cross-origin request, server code must set header "Access-Control-Allow-Origin" to response to notify browser that it accept a ajax cross-origin request.
In a browser plugin (ex: chrome app), chrome allow developer config to send request cross-origin. So you can send cross-domain request in REST Client plugin. (http://developer.chrome.com/apps/app_external.html#manifest)

Add the Access-Control-Allow-Origin on your server or use JSONP
(see What is JSONP all about?)

Related

If CORS if refusing my API request and I don't control the server, is there nothing I can do? [duplicate]

This question already has answers here:
XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header
(11 answers)
Closed 3 years ago.
So as I understand it, the person who hosts content on their server can set CORS headers which specify who can access this content and what they can do with it. The owner can also prevent certain sites from accessing these items by only allowing specific sites through using the Access-Control-Allow-Origin header.
Is any of that correct, or have I misunderstood how CORS works?
I am trying to access information from a server I do not control and am receiving the CORS error below. I am using the API provided by the owners, but I'm making requests from my localhost dev server and wonder if this might be causing issues? I am developing using Quasar and Vue and I'm very, very new to developing generally - please excuse any obvious mistakes/oversights.
Here's my code:
var data = null;
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.addEventListener('readystatechange', function () {
if (this.readyState === this.DONE) {
console.log(this.responseText);
}
});
xhr.open('GET', 'url');
xhr.setRequestHeader('X-Correlation-Id', 'id');
xhr.setRequestHeader('content-type', 'something+json; UTF-8');
xhr.setRequestHeader('authorization', 'Basic username:password');
xhr.send(data);
And I'm receiving this:
Access to XMLHttpRequest at 'url' from origin 'http://localhost:8080' has been blocked by CORS policy: 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'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
I have almost no idea what this means, and I have done a fair bit of reading trying to understand it. If there is an obvious fix, please go the step further to explain it to me - thankyou!
You can always use a CORS proxy like cors-anywhere or you could even make your own.

Access-Control-Allow-Origin Failure ( in some cases) [duplicate]

This question already has answers here:
XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header
(11 answers)
Closed 3 years ago.
I'm starting to despair.
I run a Wordpress website where I call various rest API interfaces. The problem is that some of my calls are blocked. I have already edited in the various wp files (function.php, http.php, .htaccess, etc.) but without success. The problem persists, but the odd thing is that only certain API calls will be blocked.
These are two example calls:
var httpRequest1 = new XMLHttpRequest();
httpRequest1.open("GET", "https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&vs_currencies=usd", false);
httpRequest1.send(null);
var jSONText1 = httpRequest1.responseText;
var httpRequest2 = new XMLHttpRequest();
httpRequest2.open("GET", "https://siamining.com/api/v1/network", false);
httpRequest2.send();
var jSONText2 = httpRequest2.responseText;
The first call works without problems and i get responding Json, but with the second I get the following error message:
Access to XMLHttpRequest at 'https://siamining.com/api/v1/network' from origin 'http://my-website.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource
In various files I tried ,
Access-Control-Allow-Origin: *
to insert, but that was synonymous with no success. I do not understand what the difference between the two calls is and why the second one get blocked.
The https://siamining.com/api/v1/network have the Access-Control-Allow-Origin header set to false.
The only way to circumvent it is to make the request server side having your own server that talks with siamining.com and from your wordpress javascript now you call your server endpoint that gives the reponse you want.

Cross Domain JSON - does it matter what server provides source? [duplicate]

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>

No 'Access-Control-Allow-Origin' header is present on the requested resource error. Request succeeds but failure is triggered [duplicate]

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.

AngularJS No 'Access-Control-Allow-Origin' header [duplicate]

This question already has answers here:
“Origin null is not allowed by Access-Control-Allow-Origin” error for request made by application running from a file:// URL
(17 answers)
Closed 6 years ago.
I have an AngularJS app that I need to post data to a third party URL which is used to store some data on the third party server. I get the following error when I run my code below:
XMLHttpRequest cannot load http://thirdparty.url.com/. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:51491' is therefore not allowed access.
The code I'm running in my AngularJS factory is:
return $http({
url: '//thirdparty.url.com',
method: "POST",
data: params_string,
headers: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'POST, GET, OPTIONS, PUT',
'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept'
}
});
Cross-Origin Resource sharing(CORS) is a specification that defines the ways for a web server to allow its resources to be accessed by the script running in a web page from a different domain.
The Server and the client work together, using HTTP headers to make accessing cross origin resources possible.
In your case since you browser(client) is chrome/Firefox(and not the older version of IE) , the problem is not with browser.
When you make an ajax call , browser by default will add a request header
Origin: yourdomainname
Your ajax call will only be successful when the server(http://thirdparty.url.com) sends a response similar to below
Access-Control-Allow-Origin: *
In your case , the above response header is not being sent by server.
This means that your http://thirdparty.url.com/
Does not accept requests from external sources that is/are not from http://thirdparty.url.com/, so you have to enable it from your thirdparty.url.com
Access-Control-Allow-Origin header needs to be added in the thirdparty.url.com that you are trying to access and not in your own code. It is for the website to control allowing access to the users, So you can do anything about it from your side.
Add the extension CORS
to your chrome browser.
You can't enable CORS from client side.
I should set at server level.
HTTP access control (CORS)

Categories