運行我的 React 應用程序的生產版本時， res.data 返回 html 而不是令牌

Question

當我在本地計算機上運行開發版本時，res.data 會在登錄時返回用戶的 JWT 令牌。但是，當我在我的 VPS 上運行生產版本時，res.data 會返回以下 HTML：

<!doctype html><html lang="en">
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="/manifest.json">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"><link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"><title>Fleet of Fury</title><link href="/static/css/main.2d62af7c.chunk.css" rel="stylesheet">
</head><body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div><script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script><script>!function(l){function e(e){for(var r,t,n=e[0],o=e[1],u=e[2],f=0,i=[];f<n.length;f++)t=n[f],p[t]&&i.push(p[t][0]),p[t]=0;for(r in o)Object.prototype.hasOwnProperty.call(o,r)&&(l[r]=o[r]);for(s&&s(e);i.length;)i.shift()();return c.push.apply(c,u||[]),a()}function a(){for(var e,r=0;r<c.length;r++){for(var t=c[r],n=!0,o=1;o<t.length;o++){var u=t[o];0!==p[u]&&(n=!1)}n&&(c.splice(r--,1),e=f(f.s=t[0]))}return e}var t={},p={2:0},c=[];function f(e){if(t[e])return t[e].exports;var r=t[e]={i:e,l:!1,exports:{}};return l[e].call(r.exports,r,r.exports,f),r.l=!0,r.exports}f.m=l,f.c=t,f.d=function(e,r,t){f.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},f.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},f.t=function(r,e){if(1&e&&(r=f(r)),8&e)return r;if(4&e&&"object"==typeof r&&r&&r.__esModule)return r;var t=Object.create(null);if(f.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:r}),2&e&&"string"!=typeof r)for(var n in r)f.d(t,n,function(e){return r[e]}.bind(null,n));return t},f.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return f.d(r,"a",r),r},f.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},f.p="/";var r=window.webpackJsonp=window.webpackJsonp||[],n=r.push.bind(r);r.push=e,r=r.slice();for(var o=0;o<r.length;o++)e(r[o]);var s=n;a()}([])</script><script src="/static/js/1.83de47ce.chunk.js"></script><script src="/static/js/main.f9fff7cc.chunk.js"></script>
</body>
</html>

用戶.js：

router.post("/register", (req, res) => {
  // Form validation

  const { errors, isValid } = validateRegisterInput(req.body);

  // Check validation
  if (!isValid) {
    return res.status(400).json(errors);
  }

  User.findOne({ name: req.body.name.toLowerCase() }).then(user => {
    if (user) {
      return res.status(400).json({ name: "Name already exists" });
    } else {
      const newUser = new User({
        name: req.body.name.toLowerCase(),
        password: req.body.password
      });

      // Hash password before saving in database
      bcrypt.genSalt(10, (err, salt) => {
        bcrypt.hash(newUser.password, salt, (err, hash) => {
          if (err) throw err;
          newUser.password = hash;
          newUser
            .save()
            .then(user => res.json(user))
            .catch(err => console.log(err));
        });
      });
    }
  });
});

// @route POST api/users/login
// @desc Login user and return JWT token
// @access Public
router.post("/login", (req, res) => {
  // Form validation

  const { errors, isValid } = validateLoginInput(req.body);

  // Check validation
  if (!isValid) {
    return res.status(400).json(errors);
  }

  const name = req.body.name.toLowerCase();
  const password = req.body.password;

  // Find user by name
  User.findOne({ name }).then(user => {
    // Check if user exists
    if (!user) {
      return res.status(404).json({ namenotfound: "Name not found" });
    }
    if (user.name === "admin") {
      return res.status(404).json({ namenotfound: "Name not found" });
    }

    // Check password
    bcrypt.compare(password, user.password).then(isMatch => {
      if (isMatch) {
        // User matched
        // Create JWT Payload
        const payload = {
          id: user.id,
          name: user.name
        };

        // Sign token
        jwt.sign(
          payload,
          keys.secretOrKey,
          {
            expiresIn: 31556926 // 1 year in seconds
          },
          (err, token) => {
            res.json({
              success: true,
              token: "Bearer " + token
            });
          }
        );
      } else {
        return res
          .status(400)
          .json({ passwordincorrect: "Password incorrect" });
      }
    });
  });
});

authActions.js

export const loginUser = userData => dispatch => {
  axios
    .post("/api/users/login", userData)
    .then(res => {
      // Save to localStorage

      // Set token to localStorage
      console.log(res.data)
      console.log(res.data.token)
      const { token } = res.data;
      localStorage.setItem("jwtToken", token);
      // Set token to Auth header
      setAuthToken(token);
      // Decode token to get user data
      const decoded = jwt_decode(token);
      // Set current user
      dispatch(setCurrentUser(decoded));
    })
    .catch(err =>
      dispatch({
        type: GET_ERRORS,
        payload: ((err||{}).response||{}).data || 'Error unexpected'
      })
    );
};

這使得 localStorage 中的 JWT 令牌未定義，並完全阻止我的應用程序注冊用戶、登錄用戶等。

有任何解決這個問題的方法嗎？

（為了構建我的項目，我一直在運行 react-scripts build 然后使用 serve -s build -l 80 在端口 80 上托管它）

Answer 1

我發現出了什么問題。 我沒有提供用 react-scripts 構建的靜態文件。

app.use(express.static('client/build'))

app.get('*', (req, res) => {
   res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'))
})

運行我的 React 應用程序的生產版本時， res.data 返回 html 而不是令牌

問題描述

1 個解決方案

解決方案1
0 2020-09-12 19:02:00

運行我的 React 應用程序的生產版本時， res.data 返回 html 而不是令牌

問題描述

1 個解決方案

解決方案1 0 2020-09-12 19:02:00

解決方案1
0 2020-09-12 19:02:00