Javascript Codesandbox.io出现问题时引发跨源错误

当我试图执行此代码时，Codesanbox.io中出现了“跨源错误被抛出”错误。 请问我能做些什么才能过去？ 我正在使用带有codesanbox.io的Create react应用程序

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);

从“React”导入React；
从“react dom”导入react dom；
导入“/styles.css”；
类应用程序扩展了React.Component{
状态={
客户：[
{id:1，名字：“Leon”}，
{id:1，名称：“Lea”}，
{id:1，名字：“Vanelle”}
]
};
render（）{
const title=“客户列表”；
const elements=this.state.customer.map（）；
返回(
{title}


菲利普X


证实
);
}
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；
可能是codesandbox的错吗？
你有没有在这里读到：

通常，交叉原点错误是可以在后端而不是前端（浏览器）中控制的。我怀疑您在代码中调用了一些API，而您不应该拥有在浏览器中调用的权限。CORS是一个值得阅读的完整主题。要真正理解，我认为您应该花一些时间来消化它。
您的
渲染
功能应该
映射
，通过状态中找到的每个
客户
。只要调用
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>
    );
  }

render（）{
const title=“客户列表”；
返回(
{title}

{
this.state.customer.map（c=>(

{c.name}X

))
}

证实
);
}
请链接到代码盒示例？