問題描述

我正在使用 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錯誤的原因是你沒有發送headers.由于您正在發出 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.

在 preflighted-request 中，客戶端向服務器發出 2 個請求.第一個是預檢(使用 OPTIONS 方法)，第二個是真正的請求.服務器發送 Access-Control-Allow-Headers 標頭作為預檢請求的響應.因此，它可以發送一些標頭.通過這種方式，您的 POST 請求可以工作，因為 POST 請求是預檢請求.但是對于 GET 請求，沒有預檢來收集 Access-Control-Allow-Headers 標頭和瀏覽器在這種情況下不會發送您的自定義標頭.

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

通過這種方式，您的獲取請求將是一個預檢請求.如果您的服務器使用 api-key" rel="nofollow noreferrer">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);

添加:

實際上，contentType 應該是 application/javascript 或 application/json 在進行 jsonp 請求時.沒有 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的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！