jQuery跨域POST shenanigans

Question

我試圖通過一個API進行身份驗證，該API只允許您使用帶有JSON的POST進行身份驗證，格式爲{「username」：「myusername」，「password」： 「我的密碼」}。

我一直在嘗試兩天得到這與jQuery的工作，但我遇到了問題，因爲它是跨域。我怎樣才能做到這一點？

錯誤消息：

Request Method:OPTIONS 
Status Code:405 METHOD NOT ALLOWED 

代碼到現在：

var username = "myusername"; 
var password = "mypass" 
var authurl = "https://myurl"; 

$.ajax 
({ 
    type: "POST", 
    url: authurl, 
    dataType: 'json', 
    contentType: "application/json; charset=utf-8", 
    async: false, 
    data: {'json':'{"username":"' + username + '", "password":"' + password + '"}'}, 
    success: function (result) { 
     $('#json').html(result); 
    } 
}) 

總結：

• API只接受POST面向auth
• API需要JSON作爲表單數據，例如：{「username」：「myusername」，「password」：「mypassword」}
個
• 的JS是從不同的域跑，引起交叉域錯誤

你的幫助是非常讚賞:)

Answer 1

您應該遵循不同的模式。你的本地JS將做一個ajax post到一個本地URL，它將接受你的json數據的POST方法。

此時，您的服務器代碼將向遠程服務器發送正確數據的HTTP POST，獲取響應並將其發送回調用js。

Answer 2

對於跨域的東西用JSONP（搜索跨域）

http://www.ibm.com/developerworks/library/wa-aj-jsonp1/

Answer 3

的問題是，你正在試圖張貼到不能到每次交之前發送OPTIONS請求響應的域域名請求。使用OPTIONS請求，瀏覽器會接收有關跨域規則等的信息。要啓用跨域請求，服務器必須設置Access-Control-Allow-Origin:*（或腳本的域，實際上，但涵蓋了所有內容），也可能設置爲Access-Control-Allow-Methods: GET, POST, OPTIONS標頭。

Answer 4

我在GoDaddy上有一個共享的託管。我也需要回答這個問題，經過四處搜尋，我發現它是可能的。

我寫了一個.htaccess文件，把它放在與我的操作頁面相同的文件夾中。下面是.htaccess文件的內容：

Header add Access-Control-Allow-Origin "*" 
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type" 
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS" 

這裏是我的Ajax調用：

$.ajax({ 
     url: 'http://www.mydomain.com/myactionpagefolder/gbactionpage.php', //server script to process data 
     type: 'POST', 
     xhr: function() { // custom xhr 
      myXhr = $.ajaxSettings.xhr(); 
      if(myXhr.upload){ // check if upload property exists 
       myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // for handling the progress of the upload 
      } 
      return myXhr; 
     }, 
     //Ajax events 
     beforeSend: beforeSendHandler, 
     success: completeHandler, 
     error: errorHandler, 
     // Form data 
     data: formData, 
     //Options to tell JQuery not to process data or worry about content-type 
     cache: false, 
     contentType: false, 
     processData: false 
    }); 

僅供參考，請參閱這篇文章：

Header set Access-Control-Allow-Origin in .htaccess doesn't work