如何使用 Angular2 向外部 API 发出 POST 请求？

Posted 2023-03-04

【中文标题】如何使用 Angular2 向外部 API 发出 POST 请求？

【英文标题】：How to make POST request to external API using Angular2?

【发布时间】：2017-05-24 14:43:13

【问题描述】：

我正在尝试利用 CORS 来发出发布请求。我遇到了几篇与 CORS 相关的文章/答案，但不知何故无法让它发挥作用。

据我了解，access-control-allow-origin: * 将设置在服务器端以使其正常工作，但我这里有一个 angular-cli 项目。

我的项目完全基于 Angular 2.1，不涉及后端服务器。任何有关如何正确设置的建议都将受到高度赞赏。

我得到的确切错误是：

"NetworkError: 404 Not Found - https://flowxo.com/hooks/a/rbpja7r2/?usertype=User"

控制台中的这个警告：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the
remote resource at https://flowxo.com/hooks/a/rbpja7r2/?usertype=User.
(Reason: CORS header 'Access-Control-Allow-Origin' missing).

更新：

这是我尝试发出 POST 请求的方式：

let headers = new Headers();
headers.append('Access-Control-Allow-Headers', 'Content-Type');
headers.append('Content-Type', 'application/json');
headers.append('Access-Control-Allow-Methods', 'POST, OPTIONS');
headers.append('Access-Control-Allow-Origin', '*');
return this.http.post(
    this.flowxoUrl,
    JSON.stringify(formData),
    headers: headers
  )
  .map((res:Response) => res.json())
  .catch((error:any) => Observable.throw(error.json().error || 'Server error')); //...errors if any

【问题讨论】：

你能分享你的服务器端代码吗，有一些 chrome 插件可以发出 CORS 请求。

不涉及后端服务器

在这种情况下，您需要使用 chrome 插件，这个应该可以工作 chrome.google.com/webstore/detail/allow-control-allow-origi/…

【参考方案1】：

这是服务器端问题，不是 Angular。

您的服务器应该以 Access-Control-Allow-Origin 标头响应。

Java (Spring) 示例：

@Component
@Order(Ordered.HIGHEST_PRECEDENCE)
public class SimpleCorsFilter implements Filter 
    @Override
    public void init(FilterConfig filterConfig) throws ServletException 

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException 
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        HttpServletRequest request = (HttpServletRequest) servletRequest;
        response.setHeader("Access-Control-Allow-Origin", "*"); //you can specify domains here * - is a wildcard, it will allow all origins to request
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with, authorization, content-type");

        if("OPTIONS".equalsIgnoreCase(request.getMethod())) 
            response.setStatus(HttpServletResponse.SC_OK);
         else 
            filterChain.doFilter(servletRequest, servletResponse);
        
    

    @Override
    public void destroy() 

【讨论】：

这实际上是我的问题。如果项目不涉及后端服务器，我可以不利用 CORS 吗？

涉及后端服务器。不管它是不是你的。如果服务器所有者不允许您的前端来源查询，您将无能为力。

这完全有道理，但我的问题是我做事正确吗？请用代码查看更新后的问题。

不。 Access-Control-* 是服务器端标头，而不是客户端。是否将它们附加到请求中并不重要。

如果他们允许跨域，请发帖。 this.headers = new Headers(); this.headers.append("Content-Type", "application/json"); this.http.post("someUrl.com", "someField: someValue", headers);