Ionic Rest API Anruf funktioniert nicht von Gerät

Question

Ich baue meine erste App mit ionischen Rahmen. Ich stoße auf folgendes Problem. Ich habe eine Nodejs Rest API in der Cloud gehostet. Wenn ich meine App mit ionic serve ausführen und ich einige Daten abrufen, funktioniert es. Aber wenn ich es von meinem Gerät (mit ionic Lauf Android) tun, funktioniert es nicht. Ich habe etwas über Cordova-Plugin-Whitelist gelesen, aber ich habe es und funktioniert immer noch nicht.

ionic.project 
{ 
"name": "myApp", 
"app_id": "", 
"proxies": [ 
    { 
    "path": "/contacts", 
    "proxyUrl": "https://myapp.herokuapp.com/contacts" 
    } 
] 
} 

In config.xml habe ich beide dieser tags:

<access origin="*"/> 
<allow-navigation href="*" /> 

Ich vergaß zu erwähnen, dass ich zu dieser anderen api versucht, Zugriff auf https://api.chucknorris.io/jokes/random und es hat keine Probleme mit ihm. Vielleicht stimmt etwas nicht mit meinem REST-Service von nodejs?

Answer 1

ich durch dieses gleiche Problem ging, habe ich versucht, alle Möglichkeiten. Ich habe das cordova-plugin-whitelist Plugin installiert. Es enthält die Einstellungen in config.xml, die <meta> mit CSP (Content-Security-Policy) und selbst dann konnte ich das Problem nicht lösen. Ich habe alle möglichen Prozeduren gemacht und es funktioniert immer noch nicht.

Es funktionierte auf die ionic serve und ionic run -l, aber es hat nicht auf dem Gerät funktioniert. Als ich aufgab, merkte ich, dass es funktionierte, wenn ich die URLs anderer Server einfügte, und nicht für meine URL funktionierte. Ich dachte, es wäre ein Problem in meinem Server oder in meiner API.

Bis ich sah, dass meine Konstante Verweis auf URL war ohne http, denn wie in der normalen Programmierung in AngularJS, setzen Sie die Konstante //api.example.com/, und lässt den Browser verantwortlich für die Aufnahme. Aber es passiert nicht auf dem Gerät, also habe ich nicht auf meine API zugegriffen.

Ich weiß nicht, ob das dein Fall war, aber es hat lange gedauert, bis ich es herausgefunden habe und ich würde es gerne mit dir teilen.

Answer 2

Fügen Sie diese Meta-Tag in Ihrer index.html

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">