Angular应用仅发送选项请求而无需发布 [英] Angular app sends just option request without post

问题描述

我正在用angular 7制作一个应用程序，该应用程序连接到我用python编写的API.我想在POST请求中发送文本，API会执行一些nlp的操作并返回结果. API正在使用RestPlus，并托管在GCP App Engine上.所以在角度我有以下代码:

I'm making an app in angular 7 that connects to API that I wrote in python. I want to send a text in POST request and API does some nlp stuff and returns the result. API is using RestPlus and is hosted on GCP App Engine. So in angular I have this code:

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中设置的令牌.

this.text is a value I get from form and I've already checked if it's valid. X-API-KEY is a token I set in API.

在控制台中，我得到:

跨域请求被阻止:相同来源策略"不允许读取XXX处的远程资源. (原因:CORS标头"Access-Control-Allow-Origin"缺失)

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at XXX. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)

跨域请求被阻止:相同来源策略"不允许读取XXX处的远程资源. (原因:CORS请求未成功).

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at XXX. (Reason: CORS request did not succeed).

我尝试向postb.in发送发帖请求以对其进行测试，并收到相同的错误.并且postb.in显示它仅收到OPTION请求.

I tried sending a post request to postb.in to test it and got the same errors. And postb.in shows that it only received OPTION requests.

推荐答案

跨源请求意味着您正在尝试对非源服务器进行API调用(此服务器未呈现前端/客户端-结束).

Cross origin request means that you are trying to make an API call to a server which is not your origin (this server is not rendering the front-end/client-end).

示例:如果 http://localhost/dummy-app 提供了前端并且您正在尝试可以从此前端对 http://localhost:3000/dummy-api 进行API调用，这将导致CORS问题.

Example: If http://localhost/dummy-app delivers the front-end and you are trying to make an API call from this front-end to http://localhost:3000/dummy-api, it will result in a CORS issue.

解决方法:

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

• 推荐:使用您的Web服务器来完成这项工作.例如，在Nginx中创建一条新路由，该路由会将您的请求传递给API.

• Render the front-end from the server where the API end point exists. This is only a technical solution and may not be a good architecture or not even possible at times.
• Allow CORS in server. (Not highly recommended)
• Use a middleware server to render your front end. This server can have an API endpoint through which you can pass the request to desired API. CORS issue appears to be a blocking by the browser and appears only when an external API is called from front-end. You can call an API in the middleware server which then further calls the external API.

• Recommended : Use your web server to do the job. For example, create a new route in Nginx which proxy passes your request to the API.

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

location /api{ proxy_pass http://localhost:3000 }

在此方法中， http://localhost/dummy-app 可以以 http://localhost/api/dummy-api .

这篇关于Angular应用仅发送选项请求而无需发布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！