2017-01-25 41 views
1

AJAX調用:爲什麼增加一個額外的頭使得AJAX調用失敗

$.ajax({ 
    url: "http://myserver2:296/api/Demo/HelloWorld", 
    type: "GET", 
    dataType: 'JSONP', 
    jsonp: "callback", 
    headers: { 'API_KEY': 'mykey09090' }, 
    success: function (result) { 
     console.log(result); 
    }, 
    error: ajaxFailed 
}); 

function ajaxFailed(xmlRequest) { 
    alert(xmlRequest.status + ' \n\r ' + 
      xmlRequest.statusText + '\n\r' + 
      xmlRequest.responseText); 
} 

我得到以下錯誤:Failed to load resource: the server responded with a status of 403 (Forbidden)。但是,當我使用郵差,我只需要添加標題與http://myserver2:296/api/Demo/HelloWorld url它返回字符串。

我可以請一些協助解決問題。

我的目標是允許原始服務器與正確提供的API密鑰一起從Web Api獲取數據。

+0

「API_KEY」和它的值在AJAX請求中的位置在哪裏?是數據還是其他方式? – Si8

+1

可能的重複[如何添加一個自定義HTTP頭到js或jQuery的jjax請求?](http://stackoverflow.com/questions/7686827/how-can-i-add-a-custom-http-header -jar-js-or-jquery) – Fran

+0

我試過了,不幸的是它不適用於我。我仍然無法加載資源:服務器響應的狀態爲403(禁止)錯誤 – Si8

回答

1

API_KEY標題添加到請求triggers your browser to first send a CORS preflight OPTIONS request任何您添加到除標題定義爲CORS-safelisted request-headers以外的請求的標頭將觸發您的瀏覽器發送CORS預檢選項請求。

我無法確定,但看起來好像是您的服務器響應該OPTIONS請求,並且表示不期望獲得OPTIONS請求並且不允許它們。

Postman沒有得到這個的原因是,與瀏覽器引擎不同,郵差沒有實現CORS,所以它不會發送OPTIONS請求。 (Postman不在瀏覽器爲Web應用程序執行的同一Web安全模型下運行。)

因此,要使您的客戶端應用程序按照預期的方式通過腳本跨源訪問該服務器,必須配置服務器以正確的方式響應CORS預檢選項請求。

+0

謝謝你的迴應。這是有道理的,爲什麼它沒有API的關鍵...任何幫助或指導最後一部分? CORS是否讓它有點或者很安全? – Si8

+0

當你說配置服務器,你的意思是我的API? – Si8

+0

是通過配置服務器,我的意思是無論服務器端的.asax和.cs等代碼是否暴露API。 – sideshowbarker

相關問題