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

Posted 2023-03-14

【中文标题】使用 Angular 检查远程网站的登录凭据

【英文标题】：Check login credentials of remote website with Angular

【发布时间】：2019-06-29 18:14:31

【问题描述】：

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

我正在尝试进行 POST 调用，就像 HN 的开源 android 客户端应用程序所做的那样，特别是在此文件中：https://github.com/hidroh/materialistic/blob/master/app/src/main/java/io/github/hidroh/materialistic/accounts/UserServicesClient.java 到 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));

我该如何解决？

【问题讨论】：

也许应用程序可以调用，因为它不是 ajax .. 而是由 BACKEND ..（在这种情况下没有 CORS 问题）......如果你不得不使用前端代码..试试 JSONP

app是客户端，调用API，怎么可能是BACKEND调用？

http模块运行良好，改用JSONP解决不了问题。

【参考方案1】：

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

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

如果您有自己的服务器，您可以向您的服务器发出请求，该服务器又会向 Harker Ranks 服务器发出请求并将响应返回给您的 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'

【讨论】：

没有中间服务器就没有其他解决方案了吗？

但是我也尝试使用 curl，但我无法拨打电话，只有 Postaman 为我工作。我不明白问题可能是什么。

除了拥有一个中间服务器之外，没有其他方法可以通过 CORS 策略。如果您需要一个简单的中间服务器，您可以使用 firebase clound 功能来部署您的节点服务器。

使用 curl 无法从 news.ycombinator.com/login 获得响应的原因是它具有重定向。您可以在 curl 中使用 -L 选项来跟踪重定向。

是的，你是对的，谢谢！然后我会尝试托管一个代理。

【参考方案2】：

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

在 web api 配置文件中添加以下配置以启用 HTTP 请求并允许客户标头：

创建一个名为 crossdomain.xml 的 XML 文件，并将此文件添加到 Web 或应用项目的根位置。

另外，在web或app项目的配置文件中添加如下配置：

这将解决跨域问题。

【讨论】：

但问题是我无法更改 API，它们不是我制作的。我只能访问客户端

如果你有 API 代码，那么你可以在你的机器上测试它。之后与您的客户分享相同的信息，让他们决定他们想要什么。

我真的不明白你的，回答。我需要访问 HN API，但我无法更改它们。我只能访问客户端。

好的。只需通过此链接***.com/questions/53684484/… 并尝试这种方式，它应该可以工作。

不，我没有类似问题的授权码。不幸的是，该解决方案仅使用代理。

【参考方案3】：

CORS 问题的解决方案是使用代理，对于 Angular，在开发中可以使用 Angular CLI 服务器作为代理 (https://***.com/questions/50021126/implementation-of-proxy-server-in -angular4-5? rq = 1)。

这是我的 proxy.conf.json：

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

编辑您的 package.json 的“开始”以查看下方

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

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