Angular 使用电子邮件检查远程网站的登录凭据

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

我正试图做一个POST调用，就像一个开源Android客户端应用程序为HN做的那样，特别是在这个文件中：到url，设置用户名、密码和重定向作为参数

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

我和邮递员一起做了测试，结果非常完美

这是我的代码：

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));

---

我该如何解决呢？

您不能使用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'

---

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

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

创建一个名为crossdomain.XML的XML文件，并将该文件添加到web或应用程序项目的根位置。

另外，在web或app project的配置文件中添加以下配置：

---

这将解决跨域问题

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" : ""}
  }
}

编辑package.json的“start”以查看下面的内容

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

---

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

也许应用程序可以做这个调用，因为它不是ajax。。但是从后端制作的。。（在这种情况下没有CORS问题）。。。如果你使用前端代码..试试JSONP这个应用程序是一个客户端，调用API，后端怎么能调用？http模块工作正常，切换到JSONP并不能解决问题。没有中间服务器就没有其他解决方案了？但是我也试过使用curl，我不能调用，只有Postaman对我有效。我不明白问题出在哪里。除了中间服务器之外，没有其他方法可以通过CORS策略。如果你需要一个简单的中间服务器，你可以使用firebase clound函数来部署你的节点服务器。使用curl无法得到响应的原因是它有一个重定向。您可以使用curl中的-L选项来执行重定向。是的，您说得对，谢谢！然后我会尝试托管一个代理。但问题是我不能更改API，它们不是我自己制作的。我只能访问客户端如果你有API代码，那么你可以在你的机器上测试同样的代码。之后，与你的客户分享相同的信息，让他们决定，他们想要什么。老实说，我不理解你的，回答。我需要访问HN API，但无法更改它们。我只能访问客户端。好的。只需通过这个链接，并尝试以这种方式，它应该工作。不，我没有像这样的问题授权代码。不幸的是，解决方案仅使用代理。