XMLHttpRequest跨域拋出錯誤

Question

我爲註冊使用的站點的頂級站點做了「投票」API。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 

    <script type="text/javascript"> 

     var id = 1; 

     $(document).ready(function(){ 
      $.getJSON("http://mysite.com/index.php?page=vote", { id: id, hasVoted: 'unknown' }, function(data) { 
       if(data == 2) { 
        window.location.replace("http://mysite.com/index.php?page=vote&id=" + id); 
       } 
      }); 
     }); 

    </script> 

基本上，我給用戶的ID，然後他們把這些代碼放在他們的文件中。 該網站返回一個數字，然後重定向用戶或不進行投票。

因此，在本地主機上的代碼測試引發此錯誤：

XMLHttpRequest cannot load http://mysite.com/index.php?page=vote&id=1&hasVoted=unknown. Origin http://localhost is not allowed by Access-Control-Allow-Origin. 

如果我用這個代碼：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 

    <script type="text/javascript"> 

     var id = 1; 

     $(document).ready(function(){ 
      $.getJSON("http://mysite.com/index.php?page=vote&callback=?", { id: id, hasVoted: 'unknown' }, function(data) { 
       if(data == 2) { 
        window.location.replace("http://mysite.com/index.php?page=vote&id=" + id); 
       } 
      }); 
     }); 

    </script> 

然後，它什麼都不做。它不會引發錯誤。 （雖然數據應該等於2（當直接檢查URL時，它返回2））。

而且，如果我嘗試做一點測試，並且做alert(data);它什麼都不會拋出。

對此我完全無能爲力。任何事情都會有幫助。

Answer 1

衆所周知的問題，瀏覽器的起源控制：

瀏覽器不允許你做默認Ajax請求爲「跨域」域。交叉來源意味着端口或主機不同。因此，無法將請求發送到站點http://siteB/，而請求的腳本託管在站點A上。

簡單的解決方案是將一切事物託管在一個域中並使URL相對。如果這是不可能的，你必須找到另一種方式不允許跨源呼叫。 一些例子：

1. JSONP（只有GET）
2. CORS（工作的很好的與現代的瀏覽器）
3. 包括ifram +的窗口之間使用PostMessage的
4. 代理腳本

編輯： 我會做什麼，首先讓你的API服務器的一些東西，通過設置這些標頭：

header("Access-Control-Allow-Origin: *"); 
header("Access-Control-Allow-Methods: POST, GET, OPTIONS"); 
header("Access-Control-Allow-Headers: Authorization"); 

請注意，這與Internet Explorer無法正常工作，因此您必須使用：XDomainRequest。但是這不允許你發送標題。前兩天請看my question，如果你必須發送標題異源