无法使用 angular-cli 在 2 个本地应用程序之间执行 http post/get 请求答案

【问题标题】：Can't do http post/get request between 2 local apps with angular-cli无法使用 angular-cli 在 2 个本地应用程序之间执行 http post/get 请求
【发布时间】：2018-11-14 00:24:07
【问题描述】：

我在教程中完全发现了 angular 6，我会尝试使用 angular-cli 前端询问 djangorestframework 后端 api。

看起来我的前端只向后面发送一个 OPTIONS 请求（根据 Mozilla 的网络选项卡）。我尝试使用邮递员工具访问数据，但我的后端得到了正确的响应。

我在控制台选项卡上收到此错误：ERROR Object { headers: Object, status: 0, statusText: "Unknown Error", url: null, ok: false, name: "HttpErrorResponse", message: "Http failure response for (unknown …", error: error }

在你问我之前我设置了"Access-Control-Allow-Origin": "*" 来消除 CORS 错误，但我仍然无法访问我的后端数据。

这是我的前端代码：域分析.service.ts

import { Injectable } from '@angular/core';
import { DomainAnalyse} from './domain-analyse';
import { Observable, of } from 'rxjs';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { catchError, map, tap } from 'rxjs/operators';

import {ANALYSES}   from './mock-analyse'
import { Domain } from 'domain';

@Injectable({
  providedIn: 'root'
})
export class DomainAnalyseService {
  private urlBase = 'http://localhost:8000/api/v1.0/analyse/' 
  public domainList: DomainAnalyse[]
  getDomainSpecificAnalyse (domain, analyse) {
    const body = {'domain': domain}
    const urlCalled = this.urlBase+analyse
    return this.http.post(urlCalled, body);
  }
  constructor(private http: HttpClient) { }
}

domain-analysis.component.ts

import { Component, OnInit } from '@angular/core';
import {Router, ActivatedRoute, Params} from '@angular/router';

import { DomainAnalyseService } from '../domain-analyse.service';
import { DomainAnalyse }        from '../domain-analyse'

@Component({
  selector: 'app-domain-analyse',
  templateUrl: './domain-analyse.component.html',
  styleUrls: ['./domain-analyse.component.css']
})
export class DomainAnalyseComponent implements OnInit {

  public domain: DomainAnalyse

  constructor(
    private activatedRoute: ActivatedRoute,
    private domainAnalyseService: DomainAnalyseService
  ) { }

  analyseDomain (domain, analyse): Object {
      return this.domainAnalyseService.getDomainSpecificAnalyse(domain, analyse).subscribe(
        (analyse: DomainAnalyse) => this.domain = {...analyse}
      );
  }

  ngOnInit() {
    // subscribe to router event
    this.activatedRoute.queryParams.subscribe((params: Params) => {
      this.analyseDomain(params.domain, params.analyse)
    });
  }

}

域分析.ts

export class DomainAnalyse{
    constructor(
        public name: string,
        public analyse: string,
        public url: string,
        public date: string,
        public grading: Grading,
    ){}
}

export class Grading{
    constructor(
        public score: number,
        public grade: string,
        public color: string,
        public analyse_type: string,
        public displayable_element: Displayable[],
    ){}
}

export class Displayable{
    constructor(
        public score: number,
        public symbole: string,
        public color: string
    ){}
}

如果缺少某些内容，我可以将其添加到帖子中。

感谢您的帮助。

【问题讨论】：

用谷歌浏览器试试同样的方法。关闭所有 chrome 实例并使用以下命令启动一个新实例 chrome --disable-web-security --user-data-dir=C:\Chrome

标签： angular django-rest-framework angular-httpclient angular-cli-v6

【解决方案1】：

能否提供网络日志的 .har 文件？（使用 chrome）右键单击任何网络请求，然后说“另存为带有内容的 har”，然后将其上传到我们可以访问的地方。

【讨论】：

你可以拥有它here