CODEWITHSUNDEEP
reactjsexpressproxylocalhostpackage.json
Paul Losev
Paul Losev

Reputation: 1089

Cannot fetch resource from one localhost server to another

I have two servers, one of them is Webpack server for React (localhost:3000), and another one is for Express server (localhost:4000). I read that I need to set up proxy in my package.json file. Okay, I did it. But it still doesn't work. I tried to set headers on fetch function. Still doesn't work. And no any errors in console.

Here's my code.

package.json

{
  "name": "newsfeed",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:4000",
  "dependencies": {
    "npm-run-all": "^4.1.5",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "react-scripts": "2.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "dev": "run-p server start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "server": "node server_demo/server.js"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './style.css';

class NewsBlock extends React.Component {
    constructor() {
        super();
        this.state = {
            data: ''
        }
    }
    componentDidMount() {
        fetch('localhost:4000/',{
        credentials: 'include',
        headers: {
            'Content-Type': 'application/json'
        }
    }).then(res => res.json()).then(data => this.setState({data}));
    }
    render() {
        return <div>
            {this.state.data}
              </div>
    }
}

ReactDOM.render(
    <NewsBlock/>,
    document.getElementById('root')
)

server_demo/server.js

const exp = require('express');
const app = exp();

app.listen(4000, () => console.log('Listening on 4000'));

app.use(exp.static('./'));


app.get('/', (req, res) => {
    res.setHeader('Content-Type', 'application/json');
    res.json({
        "glossary": {
            "title": "example glossary"
        }
    });

})

Upvotes: 0

Views: 1051

Answers (2)

Bens Steves
Bens Steves

Reputation: 2849

You need to tell your server that it is okay to receive requests from somewhere else. You can use cross origin requests for this.

Install CORS on your Express Server

Use npm i cors to install cors on your server.

Import into Server

In your imports add const cors = require("cors");.

Allow other servers to connect

Then add this app.use(cors());

Bring it together your server should look something like this: 

const exp = require('express');
const cors = require('cors'); 

const app = exp();
app.use(cors());

app.listen(4000, () => console.log('Listening on 4000'));

app.use(exp.static('./'));


app.get('/', (req, res) => {
    res.setHeader('Content-Type', 'application/json');
    res.json({
        "glossary": {
            "title": "example glossary"
        }
    });

})

That should do it. Hope this helps.

Upvotes: 1

Vakaren
Vakaren

Reputation: 111

You don't need the proxy field in package.json. Add CORS middleware to your Express server.

app.use(cors({
  origin: true,
  credentials: true,
}))

Upvotes: 2

Related Questions