Data in JSON file, React table cross-origin error

Question

I am having a cross-origin error that I am trying to understand. I am trying to pass data from a JSON file into my table component. So far, react throws a cross origin error. Please advise if I'm pulling data incorrectly or I am doing something wrong.

File Table.js

/**  
*  Table.js 
* Demon
* Description: Table Interface
* Dependencies:  React 
* Modules: NavgiationBar
*/

import React from 'react';
import { data } from "../../data/SampleData.js";
import TableItem from '../TableItem.js'
class Table extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            jsonData: []
        };
    }

    //getter methods
    parseData() {
        var jsonData = JSON.parse(data);

    }

    componentDidMount() {
        this.setState({jsonData: this.parseData()})
        console.log(this.state.jsonData);
    }

    render() {
        let jsonData = this.parseData();
        let fieldRows = [];
        //loop through the data
        for (let i=0; i<jsonData.length; i++) {
           fieldRows.push(
            <TableItem 
                key={i} accountNum={jsonData.MainAcc} accountOwnerName={jsonData.MainAccName}
                dsmName = {jsonData.DSMname} salesTotal={jsonData.Sales_2018} 
            />
        );
        }
        return (
            <div className= "container">
            <section className ='table'>
                <table>
                    <thead>
                            <tr>
                                <th> Account Number</th>
                                <th> Account Owner Name</th>
                                <th> DSM Name</th>
                                <th> 2018 Sales</th>
                            </tr>
                    </thead>
                </table>
                <table>
                    <tbody>
                        <tr> 
                            <li> Hi</li>
                        </tr>
                    </tbody>
                </table>
            </section> 
            </div>

        );
    }

}

export default Table

File App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import Table from "./components/Table/Table.js";
import NavgiationBar from './components/NavgiationBar';

function App() {
  return (
    <div className="content">
      <NavgiationBar><span> </span></NavgiationBar>
      <h1> hi </h1>
      <Table/>
    </div>

  );
}

export default App;

Also I am using create-react-app boilerplate to create classes. I'm also looking for examples of passing classes into App.js with logic in it.

Sample Data 
var data = [
  {
    "Segment": "C10 - Commercial-New",
    "MainAcc": "123sdf",
    "MainAccName": "TROJAN house",
    "Telephone": "+999999",
    "E-MailAddress": "#",
    "Address": "120 North AVE",
    "City": "Santa Ana",
    "State": "California",
    "ZipCode": "92705-4415",
    "SalesRep": "Mario",
    "DSMname": "Manuel",
    "Sales_2018": 833.73,
    "Frequency": 4,
    "Avg_Recency": 71
  },
  {
    "Segment": "C10 - Commercial-New",
    "MainAcc": "12367aq",
    "MainAccName": " PAINTING",
    "Telephone": "+1235656",
    "E-MailAddress": "#",
    "Address": "3073 12st ",
    "City": "Salinas",
    "State": "California",
    "ZipCode": "93901",
    "SalesRep": "Killer Galdos",
    "DSMname": "Kim West",
    "Sales_2018": 194.68,
    "Frequency": 2,
    "Avg_Recency": 42
  }
];

There are literally hundreds of questions regarding CORS errors on Stack Overflow. Have you read any of them? For instance Origin <origin> is not allowed by Access-Control-Allow-Origin? — Heretic Monkey
– Heretic Monkey, Commented Nov 7, 2019 at 21:45
I dont really know how to add them on on the create-react-app boilerplate. Also if I dont render component with logic, it seems to work without issues. I need to add this table component — Demon
– Demon, Commented Nov 7, 2019 at 21:50

Shivrai · Accepted Answer · 2019-11-07 21:41:13Z

1

Cross Origin error occurs when you're trying to pull the data from different origin to another source. Let's say your data is located at : https://example_data and you are pulling it at: http://display_data

so the protocol difference http and https is the issue here. I will suggest to check whether the resources share the same protocol.

answered Nov 7, 2019 at 21:41

Shivrai

1192 gold badges4 silver badges16 bronze badges

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

3 Comments

Demon Over a year ago

Mostly, I been using npm start from the boiler plate commands. How would I be able to check? Everything is local. I am using localhost:3000

Vijay Venugopal Menon Over a year ago

Please share the content in "../../data/SampleData.js"; Could be something to do with the data. Not sure why you are getting CORS if you are doing everything locally.

Demon Over a year ago

shared the sample data

Demon · Accepted Answer · 2019-11-08 16:35:14Z

1

The most simple answer that I was a able to determine was that the browser was not loading the sample data json file that was why i was getting that error. i had to do stringify the data and convert it back to json object which is weird.

answered Nov 8, 2019 at 16:35

Demon

8267 silver badges23 bronze badges

Comments

Shivrai · Accepted Answer · 2019-11-07 22:00:13Z

0

Also for CORS issue, you can do the following:

The best and stable solution so far for CORS issue is to add the below header in your projects package.json file:

“headers”: {
   “Access-Control-Allow-Origin”: “*”
 },

it should fix it!

answered Nov 7, 2019 at 22:00

Shivrai

1192 gold badges4 silver badges16 bronze badges

2 Comments

Demon Over a year ago

I added that and it seems that it doesnt do much. I still get the error.

Shivrai Over a year ago

So then, may be you need to add Whitelist in your backend code as following: This all goes under your backend file: such as "settings.py;' in python. Where you are trying to connect to the database. CORS_ORIGIN_ALLOW_ALL = True CORS_ORIGIN_WHITELIST = ( 'localhost:8000', ) MIDDLEWARE = [ 'corsheaders.middleware.CorsMiddleware',] CORSANYWHERE_WHITELIST='localhost:8000' And below code goes under your Frontend package.json file as a header. “headers”: { “Access-Control-Allow-Origin”: “*” },

Collectives™ on Stack Overflow

Data in JSON file, React table cross-origin error

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related