Reactjs app data fetching from mysql problem

JavaScript
#1

Tell us what’s happening:
error message in console as follows:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:3003/posts. (Reason: CORS request did not succeed).

Your code so far

**reactjs code so far**
//Contact.js
import React, { Component } from 'react';
// import ReactDOM from 'react-dom';


class Contact extends Component {
  constructor(props) {
    super(props);
    this.state = { posts: [] };

    fetch('http://localhost:3003/posts')
      .then(response => response.json())
      .then(posts => (this.setState({posts}))
      )} 
  render() {
    return (<div>
      Hello World
      <ul>
        {this.state.posts.map(post => <li>
          <h2>{post.id}</h2>
          <p>{post.name}</p>
        </li>)}
      </ul>
    </div>);
  }
}

// ReactDOM.render(
//   <Contact />,
//   mountNode
// );
export default Contact


//App.js

import React, { Component } from 'react';
import Contact from './Component/Contact';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
      <Contact></Contact>
      </div>
    );
  }
}

export default App;



//index2.js

const express = require('express');
const bodyParser = require('body-parser');
const mysql      = require('mysql');
// https://github.com/mysqljs/mysql
const connection = mysql.createConnection({
  host     : 'localhost',
  user     : 'root',
  password : 'root',
  database : 'vanitha'
});

// Initialize the app
const app = express();

// https://expressjs.com/en/guide/routing.html
app.get('/posts', function (req, res) {
    connection.connect();

    connection.query('SELECT * FROM posts', function (error, results, fields) {
      if (error) throw error;
      res.send(results)
    });

    connection.end();
});
// Start the server
app.listen(3003, () => {
 console.log('Go to http://localhost:3003/posts to see posts');
});

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:64.0) Gecko/20100101 Firefox/64.0.

1 Like
#2

hi iam also suffering from same problem here

#3

Reason: CORS request did not succeed
The HTTP request which makes use of CORS failed because the HTTP connection failed at either the network or protocol level. The error is not directly related to CORS, but is a fundamental network error of some kind.

Does going to http://localhost:3003/posts work properly? Do you have your MySQL server up and running locally? Tried writing/reading dummy data to/from it, to see if it works as intended?

Might be because CORS isn’t enabled on the server, this is due to security reasons by default, so no one else but the webserver itself can make requests to the server.

Add this middleware before your app.get call.

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");
 next();
 });
1 Like
#4