时间戳

首页 > 解决方案 > 未捕获的错误：React 中引发了跨域错误

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

问题描述

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

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

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

未捕获的错误：引发了跨域错误。React 无法访问开发中的实际错误对象。

我已阅读以修复它清除此处的站点数据Uncaught Error: A cross-origin error was throwed。React 无法访问 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)
    }
  }

标签： javascriptreactjs

解决方案

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

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

  1. 您在www.myawesomesite.com
  2. 您尝试从www.anothersite.com加载一些内容

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

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

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

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

推荐阅读