使用 Angular 检查远程网站的登录凭据

Question

我正在使用 angular 7 为黑客新闻创建一个界面。通常我使用可用的 public API，但对于登录服务，它们不可用。

我正在尝试进行 POST 调用，正如 OpenSource Android HN 客户端应用所做的那样，特别是在这个文件中：https://github.com/hidroh/materialistic/blob/master/app/src/main/java/io/github/hidroh/materialistic/accounts/UserServicesClient.java to the url https://news.ycombinator.com/login，设置用户名、密码并作为参数重定向。

不幸的是，我的请求被 CORS 策略阻止了。

我用 Postman 进行了测试，但效果很好。

这是我的代码：

const payload = {
  'acct': 'username',
  'pw': 'password',
  'goto': 'news'
};

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'POST, GET, OPTIONS, PUT, DELETE, HEAD',
    'Access-Control-Allow-Headers': 'X-PINGOTHER, Origin, X-Requested-With, Content-Type, Accept',
    'Access-Control-Allow-Access-Control-Max-Age': '1728000',
  })
};

console.log('Try login');
this.http.post('https://news.ycombinator.com/login', payload, httpOptions)
  .pipe(
    tap(
      data => console.log(data),
      error => console.log(error)
    )
  ).subscribe(result => console.log(result));

我该如何解决？

Answer 1

您无法对具有 CORS 的服务器进行 ajax 调用。浏览器检查服务器的CORS策略。

Android/IOS 应用程序不是浏览器，它可以在不被阻止的情况下拨打电话。

如果您有自己的服务器，您可以向您的服务器发出请求，而服务器又会向 Harker Ranks 服务器发出请求，return 响应您的 Angular 应用程序。

使用 curl 请求获取页面。用您的凭据替换 acct 和 pw。

curl -L -X POST \
  https://news.ycombinator.com/login \
  -H 'Access-Control-Allow-Headers: X-PINGOTHER, Origin, X-Requested-With, Content-Type, Accept' \
  -H 'Content-Type: application/x-www-form-urlencoded' \
  -H 'cache-control: no-cache' \
  -d 'acct=username&pw=password&goto=%20news'

Answer 2

我在从 Web 域向 Web API 域发出请求时遇到了同样的问题，并通过以下方式解决了同样的问题：

在webapi配置文件中添加如下配置，启用HTTP请求，允许customer header：
创建一个名为 crossdomain.xml 的 XML 文件，并将此文件添加到 Web 或应用程序项目的根位置。
另外，在web或app项目的配置文件中添加如下配置：

这将解决跨域问题。

Answer 3

CORS问题的解决方案是使用代理，对于angular，在开发中，可以使用Angular CLI服务器作为代理（）。

这是我的 proxy.conf.json:

{
  "/hackernews/*": {
  "target":  {
      "host": "news.ycombinator.com",
      "protocol": "https:",
      "port": 443
  },
  "secure": false,
  "logLevel": "info",
  "changeOrigin": true,
  "pathRewrite": {"^/hackernews" : ""}
  }
}

编辑 "start" 的 package.json 以查看下方

"start": "ng serve --proxy-config proxy.conf.json"

不幸的是，对于实际构建没有这样简单的解决方案，可以在生产服务器上指定代理，具体取决于所使用的服务器。

使用 Angular 检查远程网站的登录凭据

Check login credentials of remote website with Angular

rest

post

postman

angular

hacker-news-api