未捕获的错误：React 中引发了跨域错误

Question

我正在尝试通过关注https://www.freecodecamp.org/news/how-to-persist-a-logged-in-user-in-react/ 博客来实现登录功能。

我想将用户令牌保存在本地存储中。

一切正常，但每次我刷新页面时，都会抛出一个错误：

未捕获的错误：引发了跨域错误。反应没有 访问开发中的实际错误对象。

我已阅读以修复它清除此处的站点数据Uncaught Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development。

但是，我想要一个适当的解决方案或任何替代方法来绕过它。

所以，即使在本地机器上，我也可以使用登录功能。

这是我迄今为止尝试过的：

用于检查当前用户是否登录：

const [userState, setUserState] = useState()

  useEffect(() => {
    const loggedInUser = localStorage.getItem("user");

    if (loggedInUser) {
      const foundUser = JSON.parse(loggedInUser);
      console.log(foundUser);
      setUserState(foundUser);
    }
  }, []);

登录：

const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");

  const handleSubmit = async e => {
    e.preventDefault();

    const user = { username, password };

    const response = await axios.post(
      "http://localhost:8000/api-token-auth/",
      user
    )

    props.setUserState(response.data)
    const loggedInUser = localStorage.getItem("user");

    if (!loggedInUser) {
      localStorage.setItem('user', response.data)
    }
  }

Answer 1

这是一个很常见的问题。这是一项安全功能，可防止网站窃取您的敏感数据。想象一下，您加载了www.learningjavascript.com，并且在您不知情的情况下对 myEvilHacker.com 进行了恶意尝试，并从您在www.chase.com 上支付账单时发送了您的银行信息。这很痛苦，但很有必要。

问题是您试图从另一个来源加载资源；例如：

1. 你在www.myawesomesite.com
2. 你尝试从www.anothersite.com加载一些东西

^^^ 你在这里“穿越起源”。对不起，兄弟，不能这样做。

通常要解决这个问题，您必须：

1. 通过启用 CORS 在服务器端允许跨域请求。根据您的网络服务器，有一些设置允许跨域请求。
2. 将数据移动到同一个原点。在上面的示例中，将所有内容放在www.myawesomesite.com

另外请注意，较新版本的 Chrome 会将对 localhost 的请求视为跨域请求并阻止它们。