GET請求與Superagent訪問控制 - 允許 - 來源錯誤

我使用superagent（與npm一起安裝）從api獲取信息。以下是JavaScript文件中的代碼：GET請求與Superagent訪問控制 - 允許 - 來源錯誤

const http = require('superagent'); 

http 
.get('https://random.dog/woof.json') 
.end(function(err, res) { 
    console.log(err); 
    console.log(res.body); 
});

我可以在我的終端中通過鍵入節點app.j來測試此操作。兩條消息出現在控制檯中，首先是null，然後是{ url: 'https://random.dog/2d394360-33e1-4c27-9e64-d65a2ab82d5b.jpg' }，這正是我所需要的。然後，我使用browserify命令（browserify app.js -o bundle.js）使我的JavaScript文件可用於HTML文件。這裏是我的HTML文件的代碼：

<html> 
    <head> 

    </head> 
    <body> 
     <h1>Text</h1> 
     <script src="bundle.js"></script> 
    </body> 
    </html>

相對簡單。這只是爲了確保一切順利。我在瀏覽器（最新版本的Firefox）中打開了HTML文件並打開了開發者控制檯。 This error appeared。我有點懊惱。當我編寫一個不和諧的機器人並且沒有遇到任何問題時，我使用了完全相同的API。所以，我自然改變了瀏覽器。同樣的錯誤。我做了一些研究，仍然有點困惑，所以我試圖設置一個標題。新的js文件：

const http = require('superagent'); 

http 
.get('https://random.dog/woof.json') 
.set('Access-Control-Allow-Origin', '*') 
.end(function(err, res) { 
    console.log(err); 
    console.log(res.body); 
});

這一次，出現this error。這似乎是沿着相同的路線。幸運的是，我擁有一個小網站，所以我將這些html和js文件上傳到服務器。我有完全相同的錯誤。我甚至將.set('Access-Control-Allow-Origin', '*')更改爲.set('Access-Control-Allow-Origin', 'http://example.com')（當然，example.com是我網站的域名）。沒有區別。我決定查看我是否可以在html文件中使用javascript進行請求，而無需調用任何其他來源。我試過這段代碼：

var HttpClient = function() { 
      this.get = function(aUrl, aCallback) { 
       var anHttpRequest = new XMLHttpRequest(); 
       anHttpRequest.onreadystatechange = function() { 
        if (anHttpRequest.readyState == 4 && anHttpRequest.status == 200) 
         aCallback(anHttpRequest.responseText); 
       } 

       anHttpRequest.open("GET", aUrl, true);    
       anHttpRequest.send(null); 
      } 
     } 
     var client = new HttpClient(); 
     client.get('http://random.dog/woof.json', function(response) { 
      console.log(response); 
     });

並在firefox中打開了新的html文件。我第一次遇到同樣的錯誤。

爲什麼我會收到這些錯誤？我能做些什麼來解決這些錯誤？提前致謝。

來源

2017-09-13 G Intel

你在遠程服務器端有什麼？它是一種你自己或某種API的服務器嗎？ – IzumiSy

首先在瀏覽器中強制使用同源訪問控制（它不會在其他地方使用）。而且，爲了允許瀏覽器中的其他來源訪問網站，SERVER本身必須允許它。您無法在瀏覽器客戶端設置任何內容讓您進入。 – jfriend00

注意，添加頭文件（比如'Access-Control-Allow-Origin'）實際上可以打破CORS訪問，否則通過觸發一個預先的飛行工作 - 參見[CORS簡單請求文檔]（https://developer.mozilla.org/EN-US /文檔/網絡/ HTTP/Access_control_CORS＃Simple_requests） –

同一來源策略默認阻止對其他域的Ajax請求。允許這種Ajax請求的唯一方法是通過CORS，它要求服務器啓用CORS。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS https://www.html5rocks.com/en/tutorials/cors/

這是一個必須具備的Access-Control-Allow-Origin頭，而不是客戶端服務器。例如，嘗試撥打https://api.github.com/而不是https://random.dog/woof.json，您會發現您可以訪問該URL，因爲它啓用了CORS標頭。

從歷史上看，JSON-P也被用作同源策略的解決方法，但它通常不如CORS，並且還需要服務器支持。

解決此問題的第三種方法是通過您爲站點使用的服務器反向代理遠程服務器，以便匹配源。這種方法在某些情況下可以很好地工作，但會帶來自身的擴展性和安全性考慮。

來源

2017-09-13 01:06:55 skirtle

GET請求與Superagent訪問控制 - 允許 - 來源錯誤

回答

相關問題