No＆＃39; Access-Control-Allow-Origin＆＃39;标头出现在请求的资源上

Question

我有一个关于No＆＃39; Access-Control-Allow-Origin＆＃39;的初学者问题。标头出现在请求的资源上。我的解决方案是删除s上的https并且它有效，但我认为这不是真正的解决方案。

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.2/papaparse.js"></script>
        <script>
        function arrayToTable(tableData) {
                var table = $('<table></table>');
                $(tableData).each(function (i, rowData) {
                    var row = $('<tr></tr>');
                    $(rowData).each(function (j, cellData) {
                        row.append($('<td>'+cellData+'</td>'));
                    });
                    table.append(row);
                });
                return table;
            }

            $.ajax({
                type: "GET",
                url: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/csv_data.csv",
                success: function (data) {
                    $('.here').append(arrayToTable(Papa.parse(data).data));
                }
            });
        </script>

Answer 1

您的AJAX呼叫需要首先发送预检请求以获得执行此请求的“权限”。您可以通过向Content-Type，application/x-www-form-urlencoded或multipart/form-data以外的值添加text/plain标头来触发此操作。

$.ajax({
  type: "GET",
  contentType: 'html',
  url: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/csv_data.csv",
  success: function(data) {
    $('.here').append(data);
  }
});

上面的代码将发出两个请求：OPTIONS请求和GET请求。我建议你在这里运行演示（https://jsfiddle.net/bjyzs8y1/）并分析网络选项卡以查看请求和响应。