从 Angular 发送的 GET HTTP 请求导致 500（内部服务器错误）[重复]答案

【问题标题】：The GET HTTP request sent from Angular is causing 500 (Internal Server Error) [duplicate]从 Angular 发送的 GET HTTP 请求导致 500（内部服务器错误）[重复]
【发布时间】：2019-11-26 21:03:32
【问题描述】：

我正在尝试向服务器发送一个 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.

【问题讨论】：

您需要在后端启用 cors
对于前端我也会考虑使用 authgaurd 并且可以激活
@PariBaker 我已经在我的后端添加了 cors。我修改了我的问题
尝试将您的 origin 属性更改为 * 字符串而不是数组
您收到 500 响应的事实与您是否启用了服务器 CORS 完全无关——至少除非您的 CORS 配置代码中有一些语法错误，否则不会.但至少问题中显示的 CORS 配置代码中没有语法错误——因此您可以排除这与 500 错误的原因有关。就像有人收到 500 错误的任何其他情况一样，我们这边基本上没有任何人可以做任何事情来确定实际原因。我们只能猜测/推测。

标签： node.js angular express passport.js

【解决方案1】：

// 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();
});

【讨论】：

嗯，谁反对这个？我提供了一种使用 cors() 的替代方法，我确信它可以工作