Codesandbox.io 引发了跨源错误问题

Question

当我尝试执行此代码时，我在 Codesanbox.io 中遇到 "A cross-origin error was thrown" 错误。请问我该怎么做才能过去？我正在使用 codesanbox.io

的 Create-react-app

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";

class App extends React.Component {
  state = {
    customer: [
      { id: 1, name: "Leon" },
      { id: 1, name: "Lea" },
      { id: 1, name: "Vanelle" }
    ]
  };
  render() {
    const title = "Customer list";
    const elements = this.state.customer.map();
    return (
      <div className="App">
        <h1>{title}</h1>
        <ul>
          <li>
            Philippe <button>X</button>
          </li>
        </ul>
        <form>
          <input type="text" placeholder="Add a customer" />
          <button>Confirm</button>
        </form>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

可能是codesandbox的问题？你读到这里了吗：https://github.com/codesandbox/codesandbox-client/issues/667

通常情况下，跨源错误是您可以在后端而不是前端（浏览器）中控制的。我怀疑你在代码中调用了一些你不应该在浏览器中调用的权限 API 。 CORS 是一个完整的主题。要真正理解，我觉得你应该花点时间消化一下。

Answer 2

您的 render 函数应该 map 通过每个 customer 状态找到。只是调用 this.state.customer.map() 会抛出一个错误，似乎 codesandbox.

没有正确处理这个错误

为你的渲染试试这个：

render() {
    const title = "Customer list";
    return (
      <div className="App">
        <h1>{title}</h1>

        <ul>
        {
          this.state.customer.map(c => (
            <li key={c.id}>
             {c.name} <button>X</button>
            </li>
          ))
        }
        </ul>
        <form>
          <input type="text" placeholder="Add a customer" />
          <button>Confirm</button>
        </form>
      </div>
    );
  }

Codesandbox.io 引发了跨源错误问题

A cross-origin error was thrown problem with Codesandbox.io

javascript

cors

reactjs

codesandbox