jQuery AJAX 调用导致错误状态 403

Question

我正在使用 jQuery AJAX 查询 Web 服务。我的查询如下所示:

var serviceEndpoint = 'http://example.com/object/details?version=1.1';
$.ajax({
  type: 'GET', 
  url: serviceEndpoint,
  dataType: 'jsonp',
  contentType: 'jsonp',
  headers: { 'api-key':'myKey' },
  success: onSuccess,
  error: onFailure
});

当我执行此操作时，我收到状态错误 403。我不明白为什么我的调用会导致状态代码 403。我控制着我的服务的安全性，它被标记为完全开放。我知道 key 是有效的，因为我在另一个通话中使用它，它有效。这是有效的调用:

var endpoint = 'http://example.com/object/data/item?version=1.1';
$.ajax({ 
  type: 'POST', 
  url: endpoint, 
  cache: 'false',
  contentType:'application/json',
  headers: {
    'api-key':'myKey',
    'Content-Type':'application/json'
  },
  data: JSON.stringify({
    id: 5,
    count:true
  }),
  success: onDataSuccess,
  error: onDataFailure
});

我知道这是两个不同的端点。但我 100% 确信这不是服务器端身份验证或权限错误。再一次，服务器端的一切都是开放的。这意味着我在客户端请求上犯了一些错误。

我觉得我应该传达这一请求是在开发过程中提出的。所以，我从 http://localhost:3000 运行这个。因此，我立即认为这是 CORS 问题。但一切看起来都是正确的。事实上，我的 POST 请求有效，但我的 GET 请求却没有让我完全沮丧。我错过了什么吗？可能是什么？

Answer 1

403错误的原因是您没有发送 header 。由于您正在发出 CORS 请求，因此您无法发送任何自定义 header ，除非服务器通过在响应中添加 Access-Control-Allow-Headers 来启用这些 header 。

在preflighted-request中，客户端向服务器发出 2 个请求。第一个是预检(使用 OPTIONS 方法)，第二个是真正的请求。服务器发送Access-Control-Allow-Headers header 作为预检请求的响应。因此它可以发送一些 header 。通过这种方式，您的 POST 请求可以工作，因为 POST 请求是预检请求。但对于 GET 请求，没有预检来收集 Access-Control-Allow-Headers在这种情况下， header 和浏览器不会发送您的自定义 header 。

此问题的解决方法:

作为解决方法，请将 dataType 和 contentType 设置为 json，如下所示:

var serviceEndpoint = 'http://example.com/object/details?version=1.1';
$.ajax({
  type: 'GET', 
  url: serviceEndpoint,
  dataType: 'json',
  contentType: 'json',
  headers: { 'api-key':'myKey' },
  success: onSuccess,
  error: onFailure
});

这样，您的获取请求将成为预检请求。如果您的服务器使用 Access-Control-Allow-Headers 启用 api-key标题，它会起作用。

上述请求的示例服务器配置(用express.js编写):

res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', '*');
res.setHeader('Access-Control-Allow-Headers', 'api-key,content-type');
res.setHeader('Access-Control-Allow-Credentials', true);

添加:

实际上，在执行 jsonp 请求时，contentType 应该是 application/javascript 或 application/json。没有 contentType 作为 jsonp。