ExpressJS，AngularJS - 跨域請求問題

Question

我正在開發一個ExpressJS（Node）的後端RESTfull應用程序。並用angularJS閱讀。我在Chrome上遇到了這個錯誤。

**

的XMLHttpRequest不能加載http://local.dev:3000/api。否 「訪問控制 - 允許來源」標題出現在請求的 資源中。原因'http://local.dev:63359'因此不允許 訪問。

**

注：ExpressJS API的郵差應用工作。郵差應用程序成功獲取數據。

這是我的代碼 ANGULARJS

$http.post("http://local.dev:3000/api",{ 
    "username" :'JJ', 
    "email" : 'email@email.com' 
}).then(function(mes){ 
    console.log(mes); 
}); 

EXPRESSJS

router.get('/', function(req, res) { 
    res.json({ message: 'hooray! welcome to our api!' }); 
}); 

在此先感謝。

Answer 1

這是CORS瀏覽器的限制。您的服務器將不得不響應一些標題來告訴瀏覽器允許跨域訪問。

如果您搜索周圍有幾個中間件作爲可用的節點包（例如express-cors）。但是我發現有時候他們並不像我想要的那樣工作。因此，這裏是我使用的一個：

app.use(function(req, res, next) { 
    res.header("Access-Control-Allow-Origin", "*"); 
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS'); 
    res.header("Access-Control-Allow-Headers", "X-Requested-With,Content-Type,Cache-Control"); 
    if (req.method === 'OPTIONS') { 
    res.statusCode = 204; 
    return res.end(); 
    } else { 
    return next(); 
    } 
}); 

順便說一句，你將不得不使用這個中間件要訪問（http://local.dev:3000/api）

當試圖訪問一個跨源資源服務器，瀏覽器將試圖發出一個Options請求來讀取這些特殊的標題並決定服務器是否允許訪問。這就是爲什麼，對於選項請求，您可以直接回應，而無需使用'next（）'來傳遞流。

您也可以通過編輯Access-Control-Allow-Methods標頭來編輯方法允許列表。

Access-Control-Allow-Headers標頭是可選的，您可以使用它來限制可以使用的標頭。