Question

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

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

我可以在浏览器中从两个网址获取JSON信息，但只能在AngularDart中连接第二个网址。我尝试了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();
  }

}

Answer 1

问题不在于Angular Dart，而是在服务器配置上，在我的情况下是Django。我通过启用CORS头配置并将我的localhost列入白名单来解决它。在Django I：

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

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

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

MIDDLEWARE_CLASSES =（ ... 'corsheaders.middleware.CorsMiddleware'， ... ）
将localhost列入白名单。

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

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

1 个答案: