0

OK, I've been at this for hours now! And I've read every conceivable link I can find on the subject, but I still CAN NOT get it to work, and it is driving me slowly insane.

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

axelra82
  • 517
  • 8
  • 23
  • 1
    This has been asked multiple times on SO. FYI, Access-Control-Allow-Origin is an header that the server needs to set and it should list your domain as an allowed origin. – WreckeR Apr 24 '16 at 07:05
  • @WreckeR Yes. I know the question has been asked several times (I had no intention of "spamming the community"). I just couldn't get it to work, no matter what I did. Thank you for your answers though. I kept reading up and finally got it to work with a PHP proxy. Like I stated on my own answer. I think I just needed some sleep and see everything with "fresh eyes" :) – axelra82 Apr 24 '16 at 15:21
  • Don't take it the wrong way. Flagging duplicate is just a way to help others who might end up on this question and point them over to a question that already has a highly voted answer. – WreckeR Apr 24 '16 at 16:46
  • have you tried `jsonp` or `cors`? – Elzo Valugi Apr 24 '16 at 17:56

1 Answers1

0

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.

axelra82
  • 517
  • 8
  • 23