Sunday, 9 April 2017

No 'Access-Control-Allow-Origin' react express docker app

I am using docker to run a front end react application and a node/express api. The react app is running on localhost:3000 and the api is running on localhost:9000. They are both fully functioning and working apps. However when I try to make a rest call from the React app to http://localhost:9000/api/whatever I am getting 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.

This is my server.js file for my express api :

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

Not sure what I'm missing here.



via erichardson30

No comments:

Post a Comment