Angular/Ionic access to Magento 2 REST API

[mario_bello]

Hi,

I'm having a hard time trying to connect my Ionic Android app with Magento REST API.

I tested REST API with PostMan and it works fine. I've created a customer and also authenticated. But when I make an api call from Angular/Ionic I'm receiving a:

Failed to load resource: the server responded with a status of 400 (Bad Request) XMLHttpRequest cannot load http://mysite.com/rest/V1/customers. Response for preflight has invalid HTTP status code 400

To prevent CORS, I add to Magento .htaccess the following lines:

Header set Access-Control-Allow-Origin *

Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"

Header always set Access-Control-Allow-Headers "*"

Do you have any resource or example that describe how to used REST API with Angular/Ionic?

thanks

[akent99]

I dont have data specific to Angular, but would love to. If I understand what you are saying you can successfully use the REST API from one client, but when using Angular the REST requests are failing. Is that correct? If so, can you look at the low level HTTP packets coming from the two clients? (E.g. using a HTTP proxy such as Charles, or using web browser built in developer tools.) If one client is working but not the other, that implies the problem is *most likely* in the HTTP request rather than the Magento web server. I would like to eliminate that first.

[mario_bello]

You are right. You've explained better than me.

PostMan vs Advanced Rest Client are the Windows alternative to Charles. I tried both approaches, HTTP proxy and browser dev tools. For sure I'm missing something.

Another thing is that HTTP Proxy (really the browser) bypass CORS. I think something similar happened with preflighted requests.

I've also coded a php script for customer creation and authentication. Executed in a different server and it behaves as expected.

My best guess is that Angular $http config is preset in a way that is in conflict with Magento htaccess def. That's why I'm seeking a Angular/Ionic related resource.

Not a clue yet.

[akent99]

Doing some quick google searches, there are projects like MOA that are for M1, but here are some other links that *might* be useful.

• https://cyrillschumacher.com/2015/01/03/magento2---rest-api-permissions/ (over a year old, pre M2 GA)
• https://www.youtube.com/watch?v=Rcq9vOgS-Ao / http://netzarbeiter.com/media/mm14es/magento-and-angularjs/#/ - oh, M1 again. @Vinai - have you done anything with M2 on Angular?

I don't have much else to suggest without more information. I don't have an example sorry. Right now it sounds like an application issue rather than a Magento issue. But I would love to keep in touch and hear how you are going.

[Vinai]

Sorry, no Angular (or anything beyond playing with cURL on the command line) on the M2 REST API yet. 

Sooner or later it will happen, but I'm afraid you are at the bleeding edge right now.

[Nir Goldman]

The solution of : 

Header set Access-Control-Allow-Origin *

Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"

Header always set Access-Control-Allow-Headers "*"

work on M2 2.1.0-rc2 

i try it and i develop an app with angularjs 2 for now and after i finish - i will export it to Ionic 2 

This is my function to get all the products from M2  for make sure it will work from frontend

(Header is an inject dependency of HTTP lib) 

GIST:https://gist.github.com/refaelgold/50af3578850ea713304a242a7554a2a6

*********

getAllM2Products(){
var headers=new Headers();
headers.append('Content-Type','application/x-www-form-urlencoded');

return this._http.get('http://www.mageplayground.tk/rest/V1/categories',{
headers:headers
}).map(res=>res.json())
}

*******

good luck! if you try to do it with AngularJS 2 - please free to contact me refaelgold@gmail.com

[Nir Goldman]

Hey! 

i try to send header with the authorisation and i get 400 

i think the problem its with M2 because i struggle with the code for days . 

You have any idea why its return 400?

[Nir Goldman]

Hey, you solve it ?

[akent99]

Have you tried replicating with just curl commands? Then other people can try to replicate. I have not been hearing of problems with authentication of REST based APIs. My first guess is a problem in the code sending the wrong headers. If you can demonstrate a problem using curl (getting Angular out of the story) that makes it much easier to repeat. (I would include the instructions you used to get the authentication token.)

[Nir Goldman]

https://magento.stackexchange.com/questions/151724/angular-js2-rest-api-call-with-magento-2-headers-...

i really try all Alen but still i get an error(403)

When i try to login as anonymous  i get an access to the REST API

On postman i can see the data