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。

Angular应用仅发送选项请求而无需发布

1 个答案: