为什么我的 Angular HTTP 请求无法在本地 Django 服务器上获取？

Question

我制作了一个 Angular 应用程序，它可以使用在线 api 来获取 json 并做一些事情。 但是，虽然 json 是相同的，但如果我尝试通过设置用 django 编写的服务器的本地 url 来仅更改 json 的 url，则 angular 似乎不再连接......

我的问题是，为什么如果使用在线云服务器可以使用，而使用本地服务器则不行？

我尝试让这台服务器“在云上”打开路由器的端口，还设置了一个 ddns，并使用邮递员或浏览器似乎可以工作，但是当我尝试使用 angular 连接时，它仍然无法获取数据...

我确信 100% 服务器会使用正确的 json 数据进行回答，因为 django 在控制台上打印出他收到了 HTTP GET 请求： http://i.imgur.com/TIQnIcR.png

我提醒你，HTTP 角度请求与另一个 api 一起工作，但我仍会显示一些代码：

export class ProdottoService {
  private prodotti: Array<ProdottoModel>;
  constructor(private httpClient: HttpClient) {
    this.prodotti = new Array<ProdottoModel>();

    var url:string = "https://gist.githubusercontent.com/saniyusuf/406b843afdfb9c6a86e25753fe2761f4/raw/523c324c7fcc36efab8224f9ebb7556c09b69a14/Film.JSON";
    var local_url:string = "http://127.0.0.1:8000/films/?format=json";

    httpClient.get(local_url)
        .subscribe((films : Array<Object> ) => {
          films.forEach((film => {
                this.prodotti.push(new ProdottoModel(film));
            }));
          }
        );

  }
  getProdotti(): Array<ProdottoModel> {
    return this.prodotti;
  }
}

使用外部 api 的结果：

http://i.imgur.com/MT7xD9c.png

感谢您的任何帮助：3

-- 编辑 -- 是一个 CORS 问题

在 django settings.py 文件中：

CORS_ORIGIN_WHITELIST = (
    'localhost:8000',
    '127.0.0.1:4200'
)


INSTALLED_APPS = (
    ...
    'corsheaders',
    ...
)

MIDDLEWARE = [  # Or MIDDLEWARE_CLASSES on Django < 1.10
    ...
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    ...
]

但我不知道是否有办法在 Angular 中设置 CORS 设置

Answer 1

根据反馈，这是一个 CORS 问题。您的 Django 服务器正在获取请求并做出响应，因为 localhost 是 Django 开发环境中隐式受信任的域，但它没有正确配置为设置跨源标头，因此浏览器不允许您的应用程序看到响应，因为服务器没有明确授权域。

这里的问题是你设置了这样的 CORS 白名单：

CORS_ORIGIN_WHITELIST = ( 'localhost:8000', '127.0.0.1:4200' )

应该是这样的：

CORS_ORIGIN_WHITELIST = ( 'localhost:4200' )

angular 在 localhost 上运行，而不是 127.0.0.1，即使这是 localhost 的别名，您的浏览器仍然会区分它们以用于 CORS。此外，您不需要将您服务的域列入白名单，因为它是同一个来源，所以不会跨越任何来源。

Answer 2

在您的屏幕截图中，响应似乎是键入“文档...”。最简单的解决方法（此处仅包含代码）是将字符串转换为 JSON。

JSON.parse(films)

这是错误的答案，因为其他答案中存在 CORS 问题，因此将其设置为该答案。