如何使用AngularDart与本地API进行通信

我可以在AngularDart中使用公共API进行通信，但不能使用本地API进行通信。如何使用AngularDart与本地API进行通信

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

我可以从两个URL JSON的信息在我的浏览器，但可以在AngularDart与第二URL进行连接。我尝试了http方法和客户端，而不是BrowserClient，并且这些代码仅在使用BrowserClient和公共API时才起作用。

下面是代码：

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(); 
    } 

}

来源

2017-09-02 Pedro Garcia

我假设你在浏览器控制台的错误消息。此错误消息将有所帮助。我还假定原因是本地服务器不返回浏览器期望的CORS头。当域或端口不同时，浏览器需要响应请求中的一些标题，然后加载代码。搜索CORS以了解更多信息（非常常见的主题） –

嗨，感谢提示，服务器没有返回CORS头是问题，我通过配置服务器解决了问题。控制台没有显示任何错误顺便说一句。 –

有趣的是，如果请求失败，bowser肯定应该显示错误。很高兴听到你可以使它工作无论如何。 –

问题是不是角镖，但它在我的情况是在服务器配置，Django的。我通过启用CORS头配置和白名单我的本地主机来解决它。在Django I中：

在终端中安装了django-cors-header模块。

PIP安装Django-CORS-头
添加模块到安装的应用程序列表。

INSTALLED_APPS =（ ... 'corsheaders'， ... ）
添加中间件类到配置

MIDDLEWARE_CLASSES =（ ... “corsheaders.middleware .CorsMiddleware'， ... ）
并将本地主机列入白名单。

CORS_ORIGIN_WHITELIST =（的 'localhost：8080'， '127.0.0.1:8080' ）

来源

2017-09-12 20:44:40

如何使用AngularDart与本地API进行通信

回答

相关问题