Angular 应用程序仅发送选项请求而不发送 [重复]

Question

我正在用 Angular 7 制作一个应用程序，该应用程序连接到我用 python 编写的 API。我想在 POST 请求中发送一个文本，API 做了一些 nlp 的事情并返回结果。 API 使用 RestPlus 并托管在 GCP App Engine 上。所以在角度我有这个代码：

posts: any;
readonly ROOT_URL = 'XXX';
const httpOptions = {
  headers: new HttpHeaders({
    'Access-Control-Allow-Origin': '*',
    'Content-Type': 'application/json',
    'X-API-KEY': 'X',
  })
};
const data: any = {
  "article": this.text
};
this.posts = this.http.post(this.ROOT_URL, data, httpOptions);

this.text 是我从表单获得的值，我已经检查过它是否有效。 X-API-KEY 是我在 API 中设置的令牌。

在控制台中我得到：

跨域请求被阻止：同源策略不允许读取 XXX 处的远程资源。 （原因：CORS 标头“Access-Control-Allow-Origin”缺失）

跨域请求被阻止：同源策略不允许读取 XXX 处的远程资源。 （原因：CORS 请求未成功）。

我尝试向 postb.in 发送一个发布请求以对其进行测试并得到相同的错误。而 postb.in 显示它只收到了 OPTION 请求。

Answer 1

跨源请求意味着您正在尝试对不是您的源的服务器进行 API 调用（该服务器未呈现前端/客户端）。

示例：如果 http://localhost/dummy-app 提供前端，而您尝试从该前端向 http://localhost:3000/dummy-api 进行 API 调用，则会导致 CORS 问题。

决议：

• 从存在 API 端点的服务器渲染前端。这只是一种技术解决方案，可能不是一个好的架构，有时甚至是不可能的。
• 在服务器中允许 CORS。 （不强烈推荐）
• 使用中间件服务器呈现您的前端。该服务器可以有一个 API 端点，您可以通过该端点将请求传递给所需的 API。 CORS 问题似乎是浏览器的阻塞，并且仅在从前端调用外部 API 时出现。您可以在中间件服务器中调用 API，然后进一步调用外部 API。

• 推荐：使用您的网络服务器来完成这项工作。例如，在 Nginx 中创建一个新路由，代理将您的请求传递给 API。

  位置 /api{ proxy_pass http://localhost:3000 }

在这个方法中http://localhost/dummy-app可以调用API为http://localhost/api/dummy-api。