Question

我完全发现教程中的角度6，我会尝试用角度cli前端询问djangorestframework后端api。

看起来我的前端只向后面发送OPTIONS请求（根据Mozilla的网络标签）。我尝试使用postman工具访问数据，我从后端得到了正确的响应。

我的控制台标签上出现此错误："Access-Control-Allow-Origin": "*"

在你问我之前我设置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) { } }以删除CORS错误，但我仍然无法访问我的后端数据。

这是我的前端代码：域analyse.service.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)
    });
  }

}

域analyse.component.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
    ){}
}

域analyse.ts

var products = ['bar', 'baz'];

products = $.makeArray(products); // necessary to unshift a jQuery object
products.unshift('foo'); // add "foo" to the beginning of the array

$(products).each(function(index) {
    if (index === 0) {
        return true; // we will skip "foo"
    }

    // From now on we can use products[index] starting from 1

});

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

感谢您的帮助。

Answer 1

你能提供网络日志的.har文件吗？（使用chrome）右键单击任何网络请求，然后说＆＃34;另存为内容＆＃34;然后上传，我们可以访问它。

无法使用angular-cli在2个本地应用之间进行http发布/获取请求

1 个答案: