XMLHttpRequest 无法加载请求标头字段 Content-Type 不允许 Access-Control-Allow-Headers答案

【问题标题】：XMLHttpRequest cannot load Request header field Content-Type is not allowed by Access-Control-Allow-HeadersXMLHttpRequest 无法加载请求标头字段 Content-Type 不允许 Access-Control-Allow-Headers
【发布时间】：2014-06-16 20:45:36
【问题描述】：

我有一个 jquery ajax 调用，我试图通过它以 json 数据格式从外部 API 获取数据。这是我的代码..

$("#click").click(function () {

                $.ajax({
                    type: "POST",
                    url: "http://pnrbuddy.com/api/check_pnr/pnr/2156641988/format/json/pbapikey/6b17f33e25e2d8197462d1c6bcb0b130/pbapisign/bd0aea241e88c8a22692eba02887ad97a220f827",
                    contentType: "application/json",
                    async: false,
                    success: function (data) {
                        $("#response").html(data.d);
                    }

                });
            });

当我单击按钮时，mozill 中的 firebug 中没有任何值或任何响应。尝试在 chrome 中执行时出现错误..

XMLHttpRequest cannot load http://pnrbuddy.com/api/check_pnr/pnr/2156641988/format/json/pbapikey/6b17f…5e2d8197462d1c6bcb0b130/pbapisign/bd0aea241e88c8a22692eba02887ad97a220f827. Request header field Content-Type is not allowed by Access-Control-Allow-Headers.

请帮帮我.. 提前谢谢..

【问题讨论】：

服务器需要支持跨域请求...en.wikipedia.org/wiki/Same-origin_policy
要么服务需要支持 CORS 或 jsonp，要么你需要从 web 服务器而不是客户端进行调用。
@JasonP 我完全不知道这一点，请您详细说明

标签： jquery ajax firebug google-chrome-devtools

【解决方案1】：

在服务器端，您应该在此目录中添加一个 .htaccess 并包含以下内容：

标头集 Access-Control-Allow-Origin: *

标头集 Access-Control-Allow-Headers: content-type

标头设置 Access-Control-Allow-Methods: *

【讨论】：

我用 Vuejs2 创建应用，用 Laravel 创建 api。同样的问题出现了，我搜索了很多，但这个答案解决了我的问题....竖起大拇指@Vero O

【解决方案2】：

这是您的工作 Ajax。我对其进行了测试，它正确地提供了有关 pnr 查询的信息。

$.ajax({
 type: "GET",
 crossDomain:true,
 url: "http://pnrbuddy.com/api/check_pnr/pnr/2156641988/format/json/pbapikey/6b17f33e25e2d8197462d1c6bcb0b130/pbapisign/bd0aea241e88c8a22692eba02887ad97a220f827", 
 success: function (data) { 
    alert(data.pnr); // result - 2156641988
    alert(data.train_num); // result - 14208
    alert(data.train_name); // result - PADMAVAT EXPRES 
 } 
});

【讨论】：