Can't get a proxy server working on react app for local mysql database

Question

I am brand new to react/dev generally so am probably being an idiot. I have a local mySQL database that I am trying to pull data from to my front end react app using an express server.

I have set up the server as:

// This is the routes.js file!

const express = require('express');
const bodyParser = require('body-parser');
const mysql = require('mysql');

const connection = mysql.createPool({
  host     : 'localhost',
  user     : 'root',
  password : '',
  database : 'asdf'
});

// Starting our app.
const app = express();

// Creating a GET route that returns data from the 'xxxx' table.
app.get('/xxxx', function (req, res) {
    // Connecting to the database.
    connection.getConnection(function (err, connection) {

    // Executing the MySQL query (select all data from the 'xxxx' table).
    connection.query('SELECT * FROM xxxx', function (error, results, fields) {
      // If some error occurs, we throw an error.
      if (error) throw error;

      // Getting the 'response' from the database and sending it to our route. This is were the data is.
      res.send(results)
    });
  });
});

// Starting our server.
app.listen(process.env.PORT || 8080);

Added a proxy to the package.json file:

.....
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },
  "proxy": "http://localhost:8080",
  "scripts": {
    "start": "react-scripts start",
......

and have called it in my app.js

  componentDidMount() {
    fetch('http://localhost:8080/xxxx')
      .then(response => response.json())
      .then(xxxx=> this.setState({ xxxx }, () => console.log("successfully fetched xxxx", xxxx)));
  }

however am still getting the following error:

Access to fetch at 'http://localhost:8080/xxxx' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Should the proxy not prevent this? What am I doing wrong (I can see all of the data at localhost:8080/xxxx)

Chaim Friedman · Accepted Answer · 2020-12-01 21:51:52Z

1

Because you have the proxy specified in your package.json, when you make the request from the client to the server, you want to leave off the origin part of the url.

This should be changed to

  componentDidMount() {
    fetch('http://localhost:8080/xxxx')
      .then(response => response.json())
      .then(xxxx=> this.setState({ xxxx }, () => console.log("successfully fetched xxxx", xxxx)));
  }

this

    fetch('/xxxx')
      .then(response => response.json())
      .then(xxxx=> this.setState({ xxxx }, () => console.log("successfully fetched xxxx", xxxx)));
  }

Essentially you will only specify the actual endpoint and leave the origin off, this will now allow webpack dev server to proxy your request to your express server.

answered Dec 1, 2020 at 21:51

Chaim Friedman

6,2714 gold badges37 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

TSto Over a year ago

Thank you so much for looking at this.

TSto Over a year ago

sorry apparently having less than 15 reputation apparently stops me upvoting your response, but it is very appreciated. Fix worked, now have 100 new errors to resolve

Chaim Friedman Over a year ago

You should still be able to accept the answer tho, it would be appreciated

TSto · Accepted Answer · 2020-12-01 23:20:26Z

0

Chaim's answer above worked! Thanks

answered Dec 1, 2020 at 23:20

TSto

294 bronze badges

Collectives™ on Stack Overflow

Can't get a proxy server working on react app for local mysql database

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related