IONIC 4 + Laravel CORS

Ionic Framework ionic-v3
1

ok, i have been searching the web for hours now and found a lot of results but no working ones :frowning:

I am developing a app in ionic 4. Up till now i was using my local “api” to test (which works) but now i want to test it with the live version which is build using laravel - it is a exact copy of the local version but then live on the domain.

I have installed https://github.com/barryvdh/laravel-cors to handle the cors and when i test the cors on https://www.test-cors.org it shows:

date: Fri, 07 Jun 2019 22:18:39 GMT
content-encoding: gzip
server: Google Frontend
access-control-allow-origin: *
etag: "1rO4KQ"
allow: POST, GET, OPTIONS, PUT, DELETE
access-control-allow-methods: POST, GET, OPTIONS, PUT, DELETE
content-type: text/html
status: 200
x-cloud-trace-context: c463d031b08229c22feccaba743c28a5
cache-control: public, max-age=600
access-control-allow-headers: access-control-allow-headers,access-control-allow-methods,access-control-allow-origin,content-type
expires: Fri, 07 Jun 2019 22:28:39 GMT

so i guess my server side cors is ok. Now in ionic im doing the following:

  getPartnersForZipcode(zipcode: string): Observable<any> {
return this.http.post(this.baseUrl+'/search-partners', {zipcode:zipcode}, this.httpOptions).pipe(
    map(results => results),
);

as http options im using

 httpOptions = {
headers: new HttpHeaders({
  'Content-Type': 'application/json',
  'Access-Control-Allow-Origin':'*',
  'Access-Control-Allow-Methods':'POST, GET, PUT, OPTIONS, DELETE, PATCH',
  'Access-Control-Allow-Headers': 'Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With',
})

*I tried it also with no headers, also with only content type etc… none made a difference

which is using the package import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';

In postman i get a good response with data

59
Screenshot 2019-06-08 at 00.29.59.png1780×390 36.3 KB

but in ionic (using ionic --serve and devapp on device (ios)) im getting CORS error

45
Screenshot 2019-06-08 at 00.25.45.png2656×696 135 KB

…i dont know whats happening… why do my requests dont work in ionic?

1 Like
2

Hi did you solve the prob. I’m currently battling with same prob too

3

change the header application/json to text… and it will work… its a quick workaround

4

Facing the same issue when done with localhost:8000

5

Do you make login method ? I’ve the same problem I’m to make login method yet and I tryed set config.json with proxies

 "proxies": [
    {
      "path": "/v1",
      "proxyUrl": "http://127.0.0.1:8000/api/v1"
    }
  ]

and nothing

6

Add to your http request.
Captura

This found to me. 1 Month ago.

7

didn’t work for me …any other solution :cry:

8

Didn’t work for me as well. Anyone who got the solution and forgot to share?