Question

我有一条明确的路线可以处理创建新用户的问题，并且在发送用户和令牌后，我需要页面重定向到/thankyou.html。

所以我在前端处理重定向，但是浏览器没有显示正确的重定向，而是显示JSON用户数据。

如果我通过邮递员测试路线，那么一切都会在后端正常工作。

在用户被发送后，我尝试在Express服务器上进行重定向，并且还尝试了链接重定向和send方法。我还向我的onreadystatechange添加了验证，以便在正确的状态代码后进行重定向，但是页面仍在重定向至JSON数据。

这是我的用户路由器。

const express = require("express");
const router = new express.Router();
const User = require("../models/user");
const client = require("twilio")(process.env.accountSid, process.env.authToken);
const auth = require("../middleware/auth");
const {
  sendWelcomeEmail,
  sendCancellationEmail
} = require("../emails/account");
const multer = require("multer");
const sharp = require("sharp");

router.post("/users", async (req, res) => {
  const user = new User(req.body);
  phone = req.body.phone;
  console.log("Line(18) userRouter req.body", req.body);

  try {
    await user.save();
    sendWelcomeEmail(user.email, user.name);
    const token = await user.generateAuthToken();

    client.calls.create(
      {
        url: "https://example.com/voice/",
        to: phone,
        from: "+17861230774"
      },
      (err, call) => {
        if (!err) {
          process.stdout.write(call.sid);
        }
      }
    );
    res.status(201).send({ user, token });
  } catch (e) {
    res.status(400);
    console.log("User Router Error l:38: ", e);
  }
});

module.exports = router;

这是我在前端的Javascript，用于处理发布请求。

// Function to create a new user
const registerButton = document.querySelector("#register");
registerButton.addEventListener("click", event => {
  event.preventDefault();
  var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

  const firstName = document.querySelector("#firstname").value;
  const lastName = document.querySelector("#lastname").value;

  const email = document.querySelector("#email").value;
  const phone = document.querySelector("#phone").value;
  const streetAddress = document.querySelector("#streetaddress").value;
  const zipcode = document.querySelector("#zipcode").value;
  const monthlyBill = document.querySelector("#monthlybill").value;
  const electricProvider = document.querySelector("#electricprovider").value;
  const homeowner = document.querySelector("#homeowner").value;
  console.log(
    firstName,
    lastName,
    email,
    phone,
    streetAddress,
    zipcode,
    monthlyBill,
    electricProvider,
    homeowner
  );
  if (!firstName || !lastName || !email || !phone) {
    alert("Please fill out all fields.");
  } else if (!filter.test(email)) {
    alert("Please provide a valid email address.");
  } else if (phone.length !== 10) {
    alert("Please enter a valid 10 digit phone number");
  } else if (!filter.test(email)) {
    alert("Please provide a valid email address.");
  } else {
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "/users", true);
    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.send(
      JSON.stringify({
        firstName: firstName,
        lastName: lastName,
        email: email,
        phone: phone,
        zipcode: zipcode,
        electricProvider: electricProvider,
        monthlyBill: monthlyBill,
        streetAddress: streetAddress,
        homeowner: homeowner
      })
    );
    xhr.onreadystatechange = () => {
      if (xhr.readyState === 4 && xhr.status === 201) {
        console.log(xhr.responseText);
        window.location = "/thankyou.html";
      } 
    };
  }
});

我期望在创建用户后浏览器重定向到/thankyou.html，但是页面将重定向到/users并呈现用户数据。任何提示将不胜感激。

Answer 1

尝试替换位置

window.location.replace("http://localhost/thankyou.html");

Answer 2

我最终不得不按照Abderrahim的建议替换window.location，并且还删除了这样的验证。

 xhr.onreadystatechange = () => {
      window.location.replace("http://localhost/thankyou.html");
      // if (xhr.status === 201) {
      //   console.log(xhr.responseText);
      //   window.location("/thankyou.html");
      // } 
    };

发送请求后发送Express路由器重定向

2 个答案: