javascript - 'Access-Control-Allow-Origin' yok react express docker uygulaması

Ön uçta bir React uygulaması ve bir Node/Express API'si çalıştırmak için Docker kullanıyorum. React uygulaması localhost:3000 üzerinde çalışıyor ve API localhost:9000 üzerinde çalışıyor. İkisi de tamamen işleyen ve çalışan uygulamalar. Ancak React uygulamasından http://localhost:9000/api/whatever adresine bir REST çağrısı yapmaya çalıştığımda aşağıdaki hatayı alıyorum

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.`

Bu benim express API'm için server.js dosyam:

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);
})

Burada neyi kaçırdığımı tam olarak bilmiyorum.

Chrome ağ sekmesi :

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

Cevap #1

Bunu daha önce aşağıdaki yapılandırmayla yapabilmiştim:

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();
  }
});

Gördüğünüz gibi benim durumumda sadece GET yöntemi yerine daha fazla yönteme izin veriyordum ve ek izin verilen başlıklar ekledim (bu durumda ihtiyacım olan Authorization gibi), dikkat edin sizin durumunuzda sadece X-Requested-With ve Content-Type belirlemişsiniz, ancak kaynağı doğrulamak istiyorsanız Origin başlığına da ihtiyacınız olabilir.

OPTIONS isteğini de, bu durumda ek veri göndermemek için kesiyorum.