CORS 支持不适用于域答案

【问题标题】：CORS Support Not working with DomainCORS 支持不适用于域
【发布时间】：2014-11-04 08:44:39
【问题描述】：

我正在本地服务器上运行 Google Super Proxy 项目，并尝试提取从 Google apppot 网站托管的 JSON 查询数据。

http://userTest.appspot.com/query?id=ahJzfmNvbm5vcnBoSDfsFEWDSDxsaXBzMjRyFQsSCEFwaVF1ZXJ5GICAgICAgIAKDA

我一直遇到的问题是我不允许从本地服务器访问此网页，因为我没有 CORS 支持。我已经尝试过使用 JavaScript 和 JQuery 来启用 CORS 支持，但我的控制台中仍然收到两条错误消息。有谁知道有什么可以帮忙的吗？

Failed to load resource: the server responded with a status of 405 (Method Not Allowed) http://userTest.appspot.com/query?id=ahJzfmNvbm5vcnBoaWEEWWEWxsaXBzMjRyFQsSCEFwaVF1ZXJ5GICAgICAgIAKDA

XMLHttpRequest cannot load http://userTest.appspot.com/query?id=ahJzfmNvbm5vcnBoaWxsaXBzMjREWEADSdyFQsSCEFwaVF1ZXJ5GICAgICAgIAKDA. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8888' is therefore not allowed access.

index.html:

<!doctype html>
<html>

    <head>
        <title>Google Super Proxy Test</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="chart-options.js"></script>
         <script src="Chart.min.js"></script>
    </head>

<body>

    <div style="width: 50%">
        <canvas id="sessions-graph" height="450" width="600"></canvas>
    </div>


</body>

</html>

图表选项.js：

$.ajax({
    type: 'GET',
    url: 'http://userTest.appspot.com/query?id=ahJzfmNvbm5vcnBoaWxsaXBzMSDFSDFSjRyFQsSCEFwaVF1ZXJ5GICAgICAgIAKDA',
    contentType: 'json',
    crossDomain: true,
    headers: { 'Access-Control-Allow-Origin': '*'},
    success: function(data) {
        $.each(data, function(index, element) {
            alert(element.name);
    })
},
    xhrFields: {
        withCredentials: true
        },

    error: function (json) {
        debugger;
    }
});



    var barChartdata = {
        labels: [],
        datasets: [
            {
                label: "My First dataset",
                fillColor: "rgba(220,220,220,0.5)",
                strokeColor: "rgba(220,220,220,0.8)",
                highlightFill: "rgba(220,220,220,0.75)",
                highlightStroke: "rgba(220,220,220,1)",
                data: []
            }
        ]
    };


    var options = {

        //Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
        scaleBeginAtZero : true,

        //Boolean - Whether grid lines are shown across the chart
        scaleShowGridLines : true,

        //String - Colour of the grid lines
        scaleGridLineColor : "rgba(0,0,0,.05)",

        //Number - Width of the grid lines
        scaleGridLineWidth : 1,

        //Boolean - If there is a stroke on each bar
        barShowStroke : true,

        //Number - Pixel width of the bar stroke
        barStrokeWidth : 2,

        //Number - Spacing between each of the X value sets
        barValueSpacing : 5,

        //Number - Spacing between data sets within X values
        barDatasetSpacing : 1,

        //Boolean - Set if responsive or not
        responsive : true

    }

window.onload = function(){

    // Get the context of the canvas element
    var ctx = document.getElementById("sessions-graph").getContext("2d");
    var sessionsGraph = new Chart(ctx).Bar(barChartdata, options); //Create a chart with "data" array

};

【问题讨论】：

标签： javascript jquery ajax cors

【解决方案1】：

Access-Control-Allow-Origin 是一个响应标头。

您要求向您提供数据的服务器必须在 HTTP 响应中提供数据。编辑负责生成http://userTest.appspot.com/query 的代码以包含它。

它不属于请求标头。您的脚本无法授予自己访问任何网站的权限。

通过将其设为请求标头，您将触发预检 OPTIONS 请求（这可能是您的 method not allowed 错误的原因）。

【讨论】：