2017-07-27 26 views
1

我試圖在我的Angular 4應用程序中使用Spotify/Musixmatch API獲取一些數據,但它不工作。我不斷收到此錯誤:Angular 4 - 沒有'Access-Control-Allow-Origin'標題出現在請求的資源上

XMLHttpRequest cannot load http://api.musixmatch.com/ws/1.1/album.get?album_id=14250417&apikey=xyz010xyz . Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://localhost:9000 ' is therefore not allowed access.

JS

let headers = new Headers(); 
    headers.append('Content-Type','application/json'); 
    headers.append('Accept', 'application/json'); 
    headers.append('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, DELETE, PUT'); 
    headers.append('Access-Control-Allow-Origin', '*'); 
    headers.append('Access-Control-Allow-Headers', "X-Requested-With, Content-Type, Origin, Authorization, Accept, Client-Security-Token, Accept-Encoding"); 
    let options = new RequestOptions({ headers: headers }); 
    console.log(options) 
    return this.http.get(this.url + 'album.get?album_id=' + album_id + '&apikey=' + this.apikey, options) 
     .map(res => res.json()) 
    } 

enter image description here

+1

的頭需要在後端設置,而不是前端... – Alex

+0

@ AJT_82我使用Spotify的API。 –

+0

從來沒有使用它,所以不能真的幫助那裏...你有沒有嘗試過這樣的事情? https://stackoverflow.com/a/41879977 – Alex

回答

4

這是瀏覽器,通常它的安全性備受關注的問題,不要讓這可能導致XSS其他請求輕鬆攻擊。 如果只是爲了發展,我建議你安裝一個插件,它會在你的瀏覽器 plugin

禁用如果進行生產,那麼你需要配置你的API。

-2

試試這個,如果還沒有通過在js中設置標題解決問題。

在Chrome中添加「禁止訪問控制允許原點」插件/附件。

喲可以在這裏找到:NoAccessControlAllowOriginAddon

+0

儘管此鏈接可能會回答問題,但最好在此處包含答案的重要部分,並提供供參考的鏈接。如果鏈接頁面更改,則僅鏈接答案可能會失效。 - [來自評論](/ review/low-quality-posts/18538305) –

相關問題