I've read every conceivable link I can find on the subject, but I still CAN NOT get it to work.
I'm making an AJAX request (From my domain) to an API (on another domain), but all I keep getting back in the console log is (obviously I've modified the exclude any domains etc):
XMLHttpRequest cannot load https://[APIPROVIDER]/something.json?options. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://[MYDOMAIN].com' is therefore not allowed access.
This is my code:
$(document).ready(function() {
function step1(){
$.ajax({
url: 'getit.php',
method: 'get',
dataType : 'json',
success: function(data){
step2(data.url);
},
error: function(jqXHR, status, error) {
console.log(error);
}
});
}
function step2(url){
$.ajax({
url: url,
type: 'get',
dataType : 'json',
success: function(data){
console.log(data);
},
error: function(xhr, status, error) {
console.log(error);
}
});
}
step1();
});
I've tried, ajaxSetup
(to set headers), doesn't help.
I've tried, headers: { 'Access-Control-Allow-Origin': '*' }
.
I've tried crossDomain: true
.
I've tried removing dataType : 'json'
.
Like I said, this is slowly driving me mad. Mostly because this is the only thing stopping me from moving on and working with presenting the response. And it's so close, I just keep getting that error, no matter what I do. I've read several articles on CORS, Access-Control-Allow-Origin in headers. I still don't understand WHY I get this error.
Any help here is greatly appreciated! /desperate
I have to admit, I'm still a little confused about the whole CORS/Access-Control-Allow-Origin with AJAX (from my understanding this is a result of the client-side call with jQuery. I.e because the server-side domain is no longer "in play"). But I finally got it to work using a PHP proxy. This is what I ended up with (for my own notation, and anyone else struggling with the same issues).
NOTE! The "key" part is specific to my own needs here (I just wanted to present the code in whole for anyone who might be new to all this). I.e, the problem being solved here is the proxy part, making the call server-side and sending the request with correct headers.
jQuery/AJAX
$(document).ready(function() {
function step1(){
$.ajax({
url: 'key.php', //get the API key. Remember to check path for key
method: 'get',
dataType : 'json',
success: function(data){
step2(data.key); //start step2 and send the key
},
error: function(jqhxr, status, error) {
console.log(error);
}
});
}
function step2(key){
var apiCall = '[APIURL]';
$.ajax({
beforeSend: function(jqxhr, settings) { //send request via PHP proxy. Remember to check path for proxy
settings.url = 'proxy.php?r=' + encodeURIComponent(settings.url);
},
url: apiCall,
type: 'get',
dataType : 'json',
data: {
apikey: key
},
success: function(data){
// do something with response
},
error: function(xhr, status, error) {
console.log(error);
}
});
}
step1(); //initiate everything
});
PHP getkey
<?php
require_once('[MY_ABS_PATH_ON_SERVER]/key.php'); //Store API Key outside of public domain for security purposes
?>
PHP key (outside of publicly accessabel folder on server)
<?php
$key = '[MY_API_KEY]';
$arrvars = array(
'key' => $key
);
echo json_encode($arrvars);
?>
PHP proxy
<?php
$url = $_GET["r"];
$ch = curl_init($url);
$options = array(
CURLOPT_SSL_VERIFYPEER => false,
CURLOPT_RETURNTRANSFER => true
);
curl_setopt_array( $ch, $options );
$response = curl_exec($ch);
curl_close($ch);
header("Content-Type: application/json; charset=utf-8");
header("Access-Control-Allow-Headers: X-Requested-With");
header("Access-Control-Allow-Methods: GET, OPTIONS");
header("Access-Control-Allow-Origin: [MYDOMAIN]");
echo($response);
?>
I think I just needed some sleep... I had been staring myself blind on this for to long.