Question

我正在尝试向服务器发送GET请求，以使在登录阶段的用户通过身份验证后，他们可以访问特定路由。否则，他们不能。这条路线是/user。我的问题是，只要登录成功，用户仍然无法访问路由/user。我创建了一个中间件功能，用于检查用户是否已通过身份验证：

function isValidUser(req, res, next) {
  if (req.isAuthenticated()) next();
  else return res.status(401).json({ message: "Unauthorized Request" });
}

此中间件功能随后在用户路由中使用：

router.get("/user", isValidUser, function(req, res, next) {
  return res.status(200).json(req.user);
});

现在使用Angular，我正在按以下方式在服务中发送请求：

  user() {
    return this._http.get("http://127.0.0.1:3000/users/user", {
      observe: "body",
      withCredentials: true,
      headers: new HttpHeaders().append("Content-Type", "application/json")
    });
  }

最后，在应该使用户可以访问的组件内部，我将此服务注入了构造函数中

constructor(private _user: UserService, private _router: Router) {
    this._user.user().subscribe(
      data => console.log(data),
      error => {
        console.log(error);
        this._router.navigate(["/login"]);
      }
    );
  }

这是服务器中的cors配置：

var cors = require("cors");
app.use(
  cors({
    origin: ["http://localhost:4200", "http://127.0.0.1:4200"],
    credentials: true
  })
);

我尝试登录时遇到的错误是：

 GET http://127.0.0.1:3000/users/user 500 (Internal Server Error)
user:1 Access to XMLHttpRequest at 'http://127.0.0.1:3000/users/user' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Answer 1

好像您遇到了CORS问题。幸运的是，在节点服务器上进行配置非常简单：

npm install cors
const cors = require('cors');
app.use(cors());

这是一个完整的例子：

var express = require('express')
var cors = require('cors')
var app = express()

app.use(cors())

app.get('/products/:id', function (req, res, next) {
  res.json({msg: 'This is CORS-enabled for all origins!'})
})

app.listen(80, function () {
  console.log('CORS-enabled web server listening on port 80')
})

达到这个目的的主要原因是因为您可能正在开发中。话虽这么说，我的猜测是您的角度应用程序运行在port 4200上，而您的节点应用程序运行在port 3000上。这是两个不同的来源，这就是您打CORS的原因。此外，您可能不需要在生产中使用CORS，因为您的节点应用程序很有可能会为您的（捆绑的）角度应用程序提供服务，因此其来源相同。这是一个非常典型的MEAN设置。

参考：https://expressjs.com/en/resources/middleware/cors.html

Answer 2

// alternatively without using external packages just paste this in your code before your routes

app.use((req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader(
    "Access-Control-Allow-Headers",
    "Origin, X-requested-With, Content-Type, Accept, Authorization"
  );
  res.setHeader(
    "Access-Control-Allow-Methods",
    "GET, POST, PATCH, PUT, DELETE, OPTIONS, PUT"
  );

  next();
});

从Angular发送的GET HTTP请求导致500（内部服务器错误）

2 个答案: