Không cho phép xuất xứ null bởi Access-Control-Allow-Origin

Question

Tôi hiện đang làm việc với API SoundCloud và muốn có một bản nhạc được nhúng khi một nút được nhấp.

tôi nhận được hai lỗi:

XMLHttpRequest không thể tải http://soundcloud.com/oembed.json?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F48419073. Nguồn gốc null không được cho phép bởi Access-Control-Cho phép Xuất xứ.

VÀ

lỗi chưa gặp: Không thể đọc thuộc 'html' null

Đây là mã của tôi:

<button onclick="getPopular()">+1</button> 
<div id="track"></div> 

<script src="http://connect.soundcloud.com/sdk.js" type="text/JavaScript"></script> 
<script type="text/JavaScript"> 
    SC.initialize({ 
     client_id: "**************", 
    }); 

    var getPopular = function() { 
     SC.get("/tracks", {limit: 1}, function(tracks) { 
      var track = tracks[0]; 
      alert("Latest track: " + track.title); 
      SC.oEmbed(track.uri, document.getElementById("track")); 
      }); 
     }; 
</script> 

tôi sử dụng một cảnh báo trong mã của tôi để cho tôi biết rằng đó là thực sự lấy thông tin từ API SoundCloud. Tôi chỉ không chắc chắn những gì khác là ngăn chặn nó từ nhúng.

Cảm ơn, trước thời gian hoặc xem câu hỏi của tôi.

• jiggabits

Answer 1

Đọc một chút về Same Origin Policy để hiểu vấn đề chính của bạn tốt hơn. Ajax, localhost và Chrome/Opera không hoạt động tốt với nhau. This related question thậm chí còn tốt hơn.

Vấn đề thứ hai của bạn là do cuộc gọi Ajax (một nơi nào đó trong API của bạn) không trả lại một phản hồi html do lỗi đầu tiên.

Thay vì giải thích vấn đề (được giải thích rất rõ trong các liên kết ở trên), tôi sẽ cung cấp giải pháp. Vì bạn đang chạy trên Chrome, có một giải pháp cho điều đó. Bắt đầu chrome với tùy chọn này:

--allow-file-access-from-files

(workaround mà tôi không biết xấu hổ mượn từ Pointy)

Bạn cũng có thể thử chạy nó trên Firefox, hoặc lưu trữ nó tạm thời. :)

---

P.S. Nếu bạn có kế hoạch phát triển nghiêm túc từ máy cục bộ của mình, bạn có thể xem xét việc cài đặt Apache để phục vụ và kiểm tra nội dung thông qua http://localhost, do đó nâng các hạn chế file:///.

Dưới đây là một số công cụ tuyệt vời đi kèm với Apache và PHP cấu hình sẵn cho sự phát triển:

• Đối với Windows: EasyPHP, WAMP.
• Nền tảng chéo: XAMPP, BitNami.

Answer 2

Nếu bạn nhận được một ca khúc trở lại, tôi sẽ cố gắng, alert (document.getElementById ("theo dõi")); để đảm bảo rằng bạn đang nhận được phần tử dom của bạn.