Comment communiquer avec une API locale avec AngularDart

Je peux communiquer dans AngularDart avec une API publique mais pas avec mon API locale.Comment communiquer avec une API locale avec AngularDart

String _url = 'localhost:8000/kanji_detail/1000/?format=json'; 
String _url = "http://jsonplaceholder.typicode.com/posts/1";

je peux obtenir l'information JSON des deux urls dans mon navigateur, mais ne peut se connecter à AngularDart avec la deuxième URL. J'ai essayé les méthodes http et le client au lieu de BrowserClient sans effet, et le code ne fonctionne que lorsque vous utilisez BrowserClient et une API publique.

Voici le code:

import "dart:async"; 
import 'dart:convert'; 

import 'package:angular2/angular2.dart'; 
//import 'package:http/http.dart' as http; 
import 'package:http/browser_client.dart'; 


@Component (
    selector: "test", 
    template: """ 
    <button (click)="change_info()">{{info}}</button> 
    """, 
) 
class Test { 
    BrowserClient client = new BrowserClient(); 
    //var client = new http.Client(); 
    String info = "default info"; 
    String _url = 'http://127.0.0.1:8000/kanji_detail/1000/?format=json'; 
    //String _url = "http://jsonplaceholder.typicode.com/posts/1"; 

    Future get_info() async { 
    var response = await client.get(_url); 
    info = JSON.decode(response.body); 
    //return JSON.decode(response.body); 
    } 

    change_info() { 
    get_info(); 
    } 

}

Source

2017-09-02 Pedro Garcia

Je suppose que vous obtenez un message d'erreur dans la console du navigateur. Ce message d'erreur serait utile. Je suppose également que la cause est que le serveur local ne renvoie pas les en-têtes CORS attendus par le navigateur. Le navigateur attend certains en-têtes dans la réponse à une requête lorsque le domaine ou le port est différent de celui où le code à partir duquel la requête a été chargée. Recherche de CORS pour en savoir plus (sujet très fréquemment demandé) –

Hey merci pour l'indice, le serveur ne renvoyant pas l'en-tête CORS était le problème, je l'ai résolu en configurant le serveur. La console n'affichait aucune erreur. –

Intéressant, le bowser devrait certainement montrer des erreurs si une demande échoue. Content de t'entendre pouvoir le faire quand même. –

Le problème était pas angulaire Dart, mais il était sur la configuration du serveur, Django dans mon cas. Je l'ai résolu en activant la configuration des en-têtes CORS et en y ajoutant ma liste locale. Dans Django I:

installés Module django-CORS-tête dans le terminal.

Pip installer django-CORS-têtes
Ajouté le module à la liste des applications installées.

INSTALLED_APPS = ( ... 'corsheaders', ... )
Ajout de la classe de middleware à la configuration

MIDDLEWARE_CLASSES = ( ... « corsheaders.middleware .CorsMiddleware ', ... )
Et liste blanche localhost.

CORS_ORIGIN_WHITELIST = ( 'localhost: 8080', '127.0.0.1:8080' )

Source

2017-09-12 20:44:40

Comment communiquer avec une API locale avec AngularDart

Répondre

Questions connexes