JSON 文件中的数据，React 表跨域错误

Posted 2023-02-27

【中文标题】JSON 文件中的数据，React 表跨域错误

【英文标题】：Data in JSON file, React table cross-origin error

【发布时间】：2020-03-04 12:48:48

【问题描述】：

我遇到了一个我想要了解的跨域错误。我正在尝试将 JSON 文件中的数据传递到我的表组件中。到目前为止，react 会引发跨源错误。请告知我是否错误地提取数据或我做错了什么。

文件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

文件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;

我也使用create-react-app 样板来创建类。我还在寻找将类传递给App.js 的示例，其中包含逻辑。

Sample Data 
var data = [
  
    "Segment": "C10 - Commercial-New",
    "MainAcc": "123sdf",
    "MainAccName": "*** 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
  
];

【问题讨论】：

Stack Overflow 上有数百个关于 CORS 错误的问题。你读过其中的任何一个吗？例如Origin <origin> is not allowed by Access-Control-Allow-Origin?

我真的不知道如何将它们添加到 create-react-app 样板中。此外，如果我不使用逻辑渲染组件，它似乎可以正常工作。我需要添加这个表格组件

【参考方案1】：

当您尝试将数据从不同来源拉到另一个来源时，会发生跨源错误。假设您的数据位于：https://example_data 你把它拉到了：http://display_data

所以 http 和 https 的协议差异是这里的问题。我会建议检查资源是否共享相同的协议。

【讨论】：

大部分情况下，我从样板命令中使用 npm start。我怎么能检查？一切都是本地的。我正在使用localhost:3000

请分享“../../data/SampleData.js”中的内容；可能与数据有关。如果您在本地做所有事情，不知道为什么会获得 CORS。

分享了样本数据

【参考方案2】：

我能够确定的最简单的答案是浏览器没有加载示例数据 json 文件，这就是我收到该错误的原因。我必须对数据进行字符串化并将其转换回 json 对象，这很奇怪。

【参考方案3】：

对于 CORS 问题，您可以执行以下操作：

到目前为止，针对 CORS 问题的最佳且稳定的解决方案是在您的项目 package.json 文件中添加以下标头：

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

它应该修复它！

【讨论】：

我添加了它，但它似乎没有多大作用。我仍然收到错误消息。

那么，您可能需要在后端代码中添加白名单，如下所示：这一切都在您的后端文件下：例如“settings.py;”在python中。您尝试连接到数据库的位置。CORS_ORIGIN_ALLOW_ALL = True CORS_ORIGIN_WHITELIST = ('localhost:8000',) MIDDLEWARE = ['corsheaders.middleware.CorsMiddleware',] CORSANYWHERE_WHITELIST='localhost:8000' 下面的代码位于您的前端 package.json 文件作为标题。“headers”：“Access-Control-Allow-Origin”：“*”，