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

Posted 2023-03-04

【中文标题】Angular 应用程序仅发送选项请求而不发送 [重复]

【英文标题】：Angular app sends just option request without post [duplicate]

【发布时间】：2019-07-18 22:10:42

【问题描述】：

我正在用 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 请求。

【问题讨论】：

Access-Control-Allow-Origin 应设置为来自服务器（您的 Python API）的响应标头

现在在我的 API 函数中，我返回 'result': result, 201, 'Access-Control-Allow-Origin': '*' 但我仍然收到跨域请求被阻止并且当我在邮递员 Access-Control-Allow-Origin 中测试 API 时在响应标头中。

【参考方案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。

【讨论】：

和GET请求一样吗？因为我可以向jsonplaceholder.typicode.com 发出 GET 请求，并且我还尝试向该页面发出 POST 请求，但没有收到任何错误

您向jsonplaceholder.typicode.com 发出的 GET 请求似乎启用了 CORS。请注意，服务器默认未启用 CORS。