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.我控制了我的服务的安全性并且标记为全开。我知道密钥是有效的，因为我在另一个呼叫中使用它，这是有效的。这是有效的电话：

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错误的原因是您没有发送标题。由于您正在发出CORS请求，因此除非服务器通过向响应中添加Access-Control-Allow-Headers来启用这些标头，否则您无法发送任何自定义标头。

在preflighted-request中，客户端向服务器发出2个请求。第一个是预检（使用OPTION方法），第二个是实际请求。服务器发送Access-Control-Allow-Headers标头作为预检请求的响应。因此它可以发送一些标头。通过这种方式，您的POST请求可以正常工作，因为POST请求是预检请求。但是对于GET请求，没有预检来收集Access-Control-Allow-Headers标题。因此，浏览器不会发送您的自定义标头。

此问题的解决方法：

要解决此问题，请将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
});

通过这种方式，您的获取请求将为preflighted request。如果您的服务器启用带有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。

Answer 2

如果您查看jQuery的Ajax调用的API page，它会在Content-Type部分中提到以下内容：

注意：对于跨域请求，请将内容类型设置为任何内容除了application / x-www-form-urlencoded，multipart / form-data，或者 text / plain将触发浏览器发送预检OPTIONS 请求服务器。

那个页面并没有真正提到＆＃34;预检OPTIONS请求＆＃34;是的，但是当我在网上查看这句话时，我发现了一些有趣的链接：

Preflight Blob Request
HTML 5 Rocks Using CORS
W3C＆＃39; Cross-Origin Resource Sharing规范
Using CORS for Cross-Domain Ajax Requests

code example＆amp; HTML5Rocks页面上的CORS image。该图显示了如何从JavaScript代码到浏览器到服务器＆amp;响应如何在所有这三个之间进行往返。

我们倾向于考虑JavaScript + Browser = Client，但在插图中，作者正在解释Web开发人员的代码和代码之间的区别。浏览器开发人员的代码，前者是用JavaScript代码编写的，后者是用C，C ++或C＃代码编写的。

一个好的数据包分析工具是Fiddler，它类似于Wireshark。这些工具中的任何一个都应该向您显示从浏览器发送到服务器的飞行前请求。最有可能的是，服务器使用403 Forbidden error阻止了您的Ajax请求。

jQuery AJAX调用导致错误状态403

2 个答案: