jQuery AJAX调用导致错误状态403 [英] jQuery AJAX call results in error status 403

问题描述

我正在使用jQuery AJAX对Web服务进行查询.我的查询看起来像这样:

I'm making a query to a web service using jQuery AJAX. My query looks like this:

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.我控制着我的服务的安全性，并将其标记为完全开放.我知道密钥是有效的，因为我在另一个可以正常使用的电话中使用了它.这是有效的呼叫:

When I execute this, I get a status error of 403. I do not understand why my call results in having the status code 403. I'm in control of the security on my service and it is marked as wide-open. I know the key is valid, because I'm using it in another call, which works. Here is the call that works:

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％确信这不是服务器端身份验证或权限错误.再一次，一切在服务器端都是开放的.这意味着我在客户端请求中犯了一些错误.

I know these are two different endpoints. But I'm 100% convinced this is not a server-side authentication or permission error. Once again, everything is wide open on the server-side. Which implies that I'm making some mistake on my client-side request.

我觉得我应该在开发过程中提出这个要求.因此，我正在 http://localhost:3000 上运行它.因此，我立即认为这是CORS问题.但是一切看起来都是正确的.我的POST请求有效，但我的GET并没有使我感到非常沮丧.我想念什么吗?会是什么?

I feel I should communicate that this request is being made during development. So, I'm running this from http://localhost:3000. For that reason, I immediately assumed it was a CORS issue. But everything looks correct. The fact that my POST request works, but my GET doesn't has me absolutely frustrated. Am I missing something? What could it be?

推荐答案

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

The reason of 403 error is you are not sending headers. Since you are making a CORS request, you cannot send any custom headers unless server enables these header by adding Access-Control-Allow-Headers to the response.

在预检请求中，客户端向服务器发出2个请求.第一个是预检(使用OPTIONS方法)，第二个是实际请求.服务器发送 Access-Control-Allow -Headers 标头作为预检请求的响应.因此，它允许发送一些标头.这样，您的POST请求就可以工作，因为POST请求是预检请求.但是对于GET请求，没有预检可以收集

In a preflighted-request, client makes 2 requests to the server. First one is preflight (with OPTIONS method) and the second one is the real request. The server sends Access-Control-Allow-Headers header as a response of the preflight request. So it enables some headers to be sent. By this way your POST request can work because the POST request is a preflight-request. But for a GET request, there is no preflight to gather Access-Control-Allow-Headers header and browser doesn't send your custom headers in this case.

此问题的解决方法:

作为一种解决方法，将您的dataType和contentType设置为json，如下所示:

As a workaround, set your dataType and contentType to json as the following:

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
});

通过这种方式，您的get请求将成为preflighted request.如果您的服务器通过api-key > Access-Control-Allow-Headers 标头，它将起作用.

By this way, your get request will be a preflighted request. If your server enables the api-key with Access-Control-Allow-Headers header, it will work.

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

Sample server configuration for the above request (written in 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.

Actually, contentType should be either application/javascript or application/json while doing a jsonp request. There is no contentType as jsonp.

这篇关于jQuery AJAX调用导致错误状态403的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！