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

【问题标题】：How to communicate with a local API with AngularDart如何使用 AngularDart 与本地 API 进行通信
【发布时间】：2018-02-11 06:32:29
【问题描述】：

我可以在 AngularDart 中与公共 API 进行通信，但不能与我的本地 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();
  }

}

【问题讨论】：

我假设您在浏览器控制台中收到一条错误消息。此错误消息会有所帮助。我还假设原因是本地服务器没有返回浏览器期望的 CORS 标头。当域或端口与发出请求的代码的加载位置不同时，浏览器会在对请求的响应中期望一些标头。搜索 CORS 以了解更多信息（非常常见的主题）
您好，感谢您的提示，服务器没有返回 CORS 标头是问题所在，我通过配置服务器解决了它。顺便说一句，控制台没有显示任何错误。
有趣的是，如果请求失败，Bowser 肯定会显示错误。很高兴听到你可以让它工作。
如果您自己找到解决方案，请考虑自行回答问题；这将帮助其他偶然发现此问题的人看到有可用的解决方案。

标签： django cors django-rest-framework dart django-cors-headers

【解决方案1】：

问题不在于 Angular Dart，而在于服务器配置，在我的例子中是 Django。我通过启用 CORS 标头配置并将本地主机列入白名单来解决它。在 Django 中：

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

pip install django-cors-headers
将该模块添加到已安装的应用列表中。

INSTALLED_APPS = ( ... 'corsheaders'， ... )
将中间件类添加到配置中

MIDDLEWARE_CLASSES = ( ... 'corsheaders.middleware.CorsMiddleware', ... )
并将本地主机列入白名单。

CORS_ORIGIN_WHITELIST = ( '本地主机：8080'， '127.0.0.1:8080' )

【讨论】：