從API請求數據時出現此錯誤

Question

我一直在搞亂從API提取數據的操作，但是由於某種原因，它給了我這個錯誤，我也不知道如何解決這個問題：

跨域請求被阻止：“同源起源”策略不允許在https://battlefieldtracker.com/bf1/api/Stats/DetailedStats?platform=2&personaId=376461834&displayName=TR_ISMAIL_TR&game=tunguska讀取遠程資源。 （原因：CORS標頭“ Access-Control-Allow-Origin”缺失）。

因此，我從http://docs.trnbattlefield.apiary.io/#introduction/parameters/platform生成了該網址，並且可以在該網站上看到《戰地風雲1》中的游戲狀態數據，但是當我將該網址復制粘貼到網絡上時，這給了我一個不好的要求。

那么有人知道如何解決此問題嗎？

Answer 1

如果您使用的是AJAX，請嘗試將數據類型設置為JSONP

$.ajax({
 url:"END POINT",
 dataType: 'jsonp', // Notice! JSONP <-- P (lowercase)
 success:function(json){       
     alert("Success");
 },
 error:function(){
     alert("Error");
 }      
});

Answer 2

你不能讓一個跨域AJAX請求 ，如果服務器不允許它（有時可以用“飛行前”的要求，詳細解釋在這里 ）。

你可以做什么 ，如果你可以控制你的Web服務器，是做一個反向代理 ，以便與當地的URL來訪問遠程數據。

這是使用Apache的方法（需要啟用mod_proxy）：

< VirtualHost *:80 >
    ServerName www.yourserver.com
    ProxyPreserveHost On
    ProxyRequests On
    ProxyPass /bfapi/ https://battlefieldtracker.com/bf1/api/
    ProxyPassReverse /bfapi/ https://battlefieldtracker.com/bf1/api/
< /VirtualHost >

並且如果您使用Nginx，請將其放置在配置文件的服務器部分中：

location /bfapi/ {
    proxy_set_header X-Real-IP  $remote_addr;
    proxy_set_header X-Forwarded-For $remote_addr;
    proxy_set_header Host $host;
    proxy_pass https://battlefieldtracker.com/bf1/api/;
}

這樣，您可以使用以下URL調用API： https : //yourserver.com/bfapi/Stats/DetailedStats?platform=2&personaId=376461834&displayName=TR_ISMAIL_TR&game=tunguska

當然，您必須用自己的域替換yourserver.com。