How can I make my front end app access my node server apis

Question

I have created a front end app by creat-react-app.
The command "npm run start" can create a webpack-dev-server and serve my
front end app for developing. Here is the problem comes:

1. My front end app must request some api from a node server I had created before.
2. By default create-react-app start a webpack-dev-server on port 3000
3. My node server was started on port 3001
4. Access port 3001 directly may cause cross-origin problems

How can I gracefully start my developing story from those problems !

Answer 1

There are two ways to solve cross-origin problems in node server,

1. Using cors node module

First install cors module. npm install cors

and then use it inside your app

const Express       = require("express");
const BodyParser    = require("body-parser");
const Cors          = require("cors");

const app = Express();
app.use(Cors());

app.use(BodyParser.urlencoded({ extended: false }));
app.use(BodyParser.json());

app.listen(3001, 'localhost', (err) => {
    if(err) {
        console.log(err);
        process.exit(-1);
    }
    console.log("Server listen port 8083");
});

2. simply use following headers

app.use(function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    res.header("Access-Control-Allow-Methods", "GET, POST, OPTIONS, PUT, DELETE");
    next();
});