How to make POST request to external API using Angular2?

Question

I'm trying to leverage CORS to make a post request. I came across several articles/answers related to CORS but somehow just couldn't get it working.

As I understand, the access-control-allow-origin: * is to be set on the server side to get this working but what I have here is a angular-cli project.

My project is purely Angular 2.1 based and no backend server is involved. Any suggestions as to how to set it up properly will be highly appreciated.

The exact error that I'm getting is this:

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

and this warning in console:

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).

Update:

Here's how I'm trying to make a POST request:

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

Can you share your server side code, there are some chrome plugins that make it possible to make CORS request. — Siddharth Sharma
– Siddharth Sharma, Commented Jan 10, 2017 at 7:21
In that case you will need to use a chrome plugin, this one should work chrome.google.com/webstore/detail/allow-control-allow-origi/… — Siddharth Sharma
– Siddharth Sharma, Commented Jan 10, 2017 at 8:40

Maciej Treder · Accepted Answer · 2017-01-10 07:25:14Z

This is server side issue, not Angular.

Your server should respond with Access-Control-Allow-Origin header.

Java (Spring) example:

@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() {} }

That's my question actually. Can I not leverage CORS if a project does not involve a backend server?
It is involving back-end server. Wheter it is yours or not. If server owner doesn't allow your frontend origin to query, you can do nothing.
That makes total sense but my question here is am I doing things correctly? Please take a look at the updated question with the code.
Nope. Access-Control-* are server side headers, not client. It doesn't matter if you attach them or not to the request.
If they allow cross-origin, just make a post. this.headers = new Headers(); this.headers.append("Content-Type", "application/json"); this.http.post("someUrl.com", "{someField: someValue}", headers);

Collectives™ on Stack Overflow

How to make POST request to external API using Angular2?

1 Answer 1

7 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Related