Lỗi xuất xứ chéo JSONP 'Không có tiêu đề Access-Control-Allow-Origin' hiện diện '

Question

Tôi đang sử dụng Ajax để lấy dữ liệu từ twitter bằng API của họ. Tôi đang cố gắng sử dụng jsonp và từ những gì tôi có thể nhìn thấy và hiểu tôi nghĩ rằng tôi đang làm tất cả mọi thứ đúng (rõ ràng là không mặc dù).

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> 
<script> 
    $(document).ready(function() { 
     $.ajax({ 
      type: 'GET', 
      datatype: 'jsonp', 
      data: {}, 
      crossDomain: 'true', 
      url: "http://twitter.com/status/user_timeline/padraicb.json?count=10&callback=?", 
      error: function(textStatus, errorThrown) { 
       alert("error"); 
      }, 
      success: function(msg) { 
       console.log(msg); 
      } 
     }); 
    }); 
</script> 

Đoạn mã trên tạo ra một lỗi trong cả Chrome và Firefox XMLHttpRequest không thể tải http://twitter.com/status/user_timeline/padraicb.json?count=10&callback=?. Không có tiêu đề 'Access-Control-Allow-Origin' xuất hiện trên tài nguyên được yêu cầu. Do đó, gốc 'null' không được phép truy cập.

Từ hiểu biết của tôi, tôi nghĩ rằng có &callback=? và có loại được đặt thành jsonp sẽ cho phép điều này thành công. Hơn nữa là tôi có thể thấy đối tượng JSON được trả về trong fiddler nó không chỉ được xử lý bởi kịch bản. Tôi đã thử nhiều API với cùng một vấn đề xảy ra.

Một API như vậy cũng hoạt động khi được nhập vào thanh địa chỉ.

Vì vậy, tôi sau khi tìm kiếm và tìm kiếm rộng rãi, tôi có cần một số cách đặt nguồn gốc thành * không? Tôi nghĩ rằng đây là một vấn đề phía máy chủ?

Tôi cũng đã thử ?callback? nhưng không có kết quả.

Bất kỳ ý tưởng nào cũng sẽ là lời cảm ơn tuyệt vời.

Answer 1

cho biết nguồn hỗ trợ jsonp, vì vậy không có nhu cầu CORS ... vấn đề là datatype: 'jsonp' nó phải được dataType: 'jsonp'

$(document).ready(function() { 
    $.ajax({ 
     type: 'GET', 
     dataType: 'jsonp', 
     data: {}, 
     url: "http://twitter.com/status/user_timeline/padraicb.json?count=10&callback=?", 
     error: function (jqXHR, textStatus, errorThrown) { 
      console.log(jqXHR) 
     }, 
     success: function (msg) { 
      console.log(msg); 
     } 
    }); 
}); 

Demo: Fiddle

Answer 2

Tiêu đề được cho là được đặt trên máy chủ của Twitter khi chúng phản hồi. Nếu nó không có sẵn, sau đó nó có nghĩa là bạn không thể truy cập tài nguyên này bằng cách sử dụng AJAX từ bất cứ nơi nào bên ngoài miền riêng của họ.
Do đó, bạn không thể sử dụng API của họ từ javascript trên trình duyệt. Bạn đã thiết lập máy chủ của riêng mình hoạt động như một tài nguyên trung gian để giao tiếp với Twitter API.

Chỉnh sửa: Cũng đáng để chỉ ra tại thời điểm này rằng twitter đang đóng các yêu cầu API chưa được xác thực của họ. Bạn cần thiết lập ứng dụng bằng twitter và sử dụng khóa API để thực hiện yêu cầu.