沒有'Access-Control-Allow-Origin'反應快速碼頭應用程序

Question

我使用碼頭運行一個前端反應應用程序和一個節點/快遞API。 反應應用程序在localhost:3000上運行，API正在localhost:9000上運行。他們都是功能齊全的工作應用程序。然而，當我試圖讓從應用程序做出反應REST調用來http://localhost:9000/api/whatever我收到以下錯誤

XMLHttpRequest cannot load http://localhost:9000/api/schedule. No 
Access-Control-Allow-Origin' header is present on the requested 
resource. Origin 'http://localhost:3000' is therefore not allowed access.` 

這是我表達我的API文件server.js：

const express = require('express'); 
const port = process.env.PORT || 9000; 

const app = express(); 

require('./app/routes')(app); 
app.use(function(req, res, next) { 
    // Website you wish to allow to connect 
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000'); 

    // Request methods you wish to allow 
    res.setHeader('Access-Control-Allow-Methods', 'GET'); 

    // Request headers you wish to allow 
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type'); 

    // Set to true if you need the website to include cookies in the requests sent 
    // to the API (e.g. in case you use sessions) 
    res.setHeader('Access-Control-Allow-Credentials', true); 

    // Pass to next layer of middleware 
    next(); 
}); 
app.listen(port,() => { 
    console.log('listening on port : ' + port); 
}) 

不知道是什麼我在這裏失蹤。

Chrome的網絡標籤：

Request URL:http://localhost:9000/api/schedule 
Request Method:GET 
Status Code:200 OK 
Remote Address:[::1]:9000 
Response Headers 
view source 
Connection:keep-alive 
Content-Length:86 
Content-Type:application/json; charset=utf-8 
Date:Mon, 10 Apr 2017 04:40:06 GMT 
ETag:W/"56-l2wi6AdD2GGTOMvRjRYO96YmR0w" 
X-Powered-By:Express 
Request Headers 
view source 
Accept:application/json, text/plain, */* 
Accept-Encoding:gzip, deflate, sdch, br 
Accept-Language:en-US,en;q=0.8 
Connection:keep-alive 
Host:localhost:9000 
Origin:http://localhost:3000 
Referer:http://localhost:3000/ 
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36 

Answer 1

我已經能夠用下面的配置之前做到這一點：

app.use((req, res, next) => { 
    const origin = req.get('origin'); 

    // TODO Add origin validation 
    res.header('Access-Control-Allow-Origin', origin); 
    res.header('Access-Control-Allow-Credentials', true); 
    res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE'); 
    res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization, Cache-Control, Pragma'); 

    // intercept OPTIONS method 
    if (req.method === 'OPTIONS') { 
    res.sendStatus(204); 
    } else { 
    next(); 
    } 
}); 

正如你可以在我的情況，我允許只比更多的方法見GET之一，並添加額外的允許標題（例如在這種情況下，我需要一個Authorization），請注意，在您的情況下，您只指定X-Requested-With和Content-Type，但您可能還需要Origin一個如果你想驗證起源。

我也在攔截OPTIONS請求，以避免在這種情況下發送額外的數據。

Answer 2

我會建議嘗試安裝依賴cors，

https://github.com/expressjs/cors

如果您需要任何參考克服這一點，你可以檢查我的回購協議。

https://github.com/SgSridhar/bookmarks-api