Ajax Jquery CORS not working

Question

Hi everyone i'am fighting and searching solutions about this from 3 days. I have a problem getting data from sharethis.com RESTapi. I am working with jQuery and Laravel 5.2. I want to get values from this json: http://rest.sharethis.com/v1/count/urlinfo?url=http://www.sharethis.com but i'am very frustated trying a lot of methods and functions. My actual code is this:

function setHeader(xhr) { xhr.setRequestHeader('Access-Control-Allow-Origin', '*'); xhr.setRequestHeader('Access-Control-Allow-Headers', 'Content-Type'); xhr.setRequestHeader("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE,OPTIONS"); } $.ajax({ url: 'http://rest.sharethis.com/v1/count/urlinfo?url=http://www.sharethis.com', type: 'GET', beforeSend: setHeader, contentType: 'application/json; charset=utf-8', success: function() { alert("Success"); }, error: function() { alert('Failed!'); } });

This request always return "Failed!". I understand a little what CORS means but on practice i can't make it work. Any ideas? Thanks..

" I understand CORS" ... clearly you don't, those headers can't be set in request, they have to be set server side — charlietfl
– charlietfl, Commented Oct 22, 2016 at 22:01
Hi @charlietfl i put this on first line of my php file: <?php header('Access-Control-Allow-Origin: *'); ?> but not make any change... any idea? — Francisco
– Francisco, Commented Oct 22, 2016 at 22:03
@Francisco This one header is not enough. You need Allow-Headers and Allow-Methods as well. — Chris Dąbrowski
– Chris Dąbrowski, Commented Oct 22, 2016 at 22:05
But you don't control sharethis.com. Request isn't going to your server. — charlietfl
– charlietfl, Commented Oct 22, 2016 at 22:05

Chris Dąbrowski · Accepted Answer · 2016-10-22 22:04:10Z

Maybe you actually don't understand CORS :)

These headers have to be present in the response, not in the request.

The server has to provide them.

The server has to agree.

The URL you provided doesn't have CORS headers so you can't fetch it via AJAX unless you modify the backend.

QWERTYcat · Accepted Answer · 2016-10-23 00:52:25Z

Run this code with XMLHttpRequest to get data

 var url = "http://rest.sharethis.com/v1/count/urlinfo?url=http://www.sharethis.com"; var xhr = createCORSRequest('GET', url); xhr.setRequestHeader( 'X-Custom-Header', 'value'); xhr.withCredentials = true; xhr.onload = function () { if (this.status === 200) { console.log(xhr); } }; xhr.send();

And there is the function to check if the url support CORS

function createCORSRequest(method, url) { var xhr = new XMLHttpRequest(); if ("withCredentials" in xhr) { // XHR for Chrome/Firefox/Opera/Safari. xhr.open(method, url, true); console.log("for chrome/fir"); } else if (typeof XDomainRequest != "undefined") { // XDomainRequest for IE. xhr = new XDomainRequest(); xhr.open(method, url); console.log("ie"); } else { // CORS not supported. xhr = null; console.log("not supported"); } return xhr; }

hope it helps, regards

Hi thanks for you help but the console still saying: XMLHttpRequest cannot load rest.sharethis.com/v1/count/urlinfo?url=http://…. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'localhost' is therefore not allowed access.

Collectives™ on Stack Overflow

Ajax Jquery CORS not working

2 Answers 2

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Linked

Related