Ajax API 呼叫 Access-Control-Allow-Origin。来源不允许访问

Question

好的，我已经在这里工作了几个小时了！我已经阅读了所有我能想到的关于这个主题的东西 link，但我仍然无法让它发挥作用，这让我慢慢地发疯。

我正在向 API（在另一个域上）发出 AJAX 请求（从我的域），但我一直在控制台日志中返回的是（显然我已经修改了排除任何域等):

XMLHttpRequest 无法加载 https://[APIPROVIDER]/something.json?options. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://[MYDOMAIN].com' 因此不允许访问。

这是我的代码

$(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();
});

我试过了，ajaxSetup（设置headers）没有帮助。我试过了，headers: { 'Access-Control-Allow-Origin': '*' }。我试过 crossDomain: true。我试过删除 dataType : 'json'.

就像我说的，这让我快发疯了。主要是因为这是唯一阻止我继续前进并致力于提出回应的事情。它是如此接近，无论我做什么，我都会不断收到该错误。我读过几篇关于 CORS 的文章，Access-Control-Allow-Origin in headers。我仍然不明白为什么会出现此错误。

非常感谢这里的任何帮助！ /绝望

Answer 1

我不得不承认，我对整个 CORS/Access-Control-Allow-Origin 和 AJAX 仍然有点困惑（根据我的理解，这是 client-side 调用 [= 的结果43=]。即因为 server-side 域不再是 "in play")。但我最终使用 PHP 代理让它工作。这就是我最终得到的结果（对于我自己的符号，以及其他为同样问题而苦苦挣扎的人）。

注意！ "key" 部分专门针对我自己的需要（我只是想向所有可能不熟悉这一切的人展示完整的代码).即，这里要解决的问题是代理部分，调用 server-side 并发送正确的 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 获取密钥

<?php
    require_once('[MY_ABS_PATH_ON_SERVER]/key.php'); //Store API Key outside of public domain for security purposes
?>

PHP 密钥（在服务器上的公共 accessabel 文件夹之外）

<?php
    $key = '[MY_API_KEY]';

    $arrvars = array(
        'key' => $key
    );

    echo json_encode($arrvars);
?>

PHP代理

<?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);
?>

我想我只是需要睡一觉...我已经盯着自己看了很长时间了。

Ajax API 呼叫 Access-Control-Allow-Origin。来源不允许访问

Ajax API call Access-Control-Allow-Origin. Origin not allowed access

api

ajax

jquery

header

access-control