Question

我在以下位置有一个Rest API：https://back-end-gubee.herokuapp.com/service 它返回了三个对象，这些对象内部具有属性和两个对象列表。

[{"id":20,"name":"Gubee Fretes","description":"Ferramenta para gestão e calculo de fretes","active":false,"value":0.0,"targets":[{"id":1,"name":"Ecommerce","description":null},{"id":2,"name":"ERP","description":null},{"id":3,"name":"Loja fisica","description":null}],"technologies":[{"id":10,"name":"MongoDB","description":null,"developer":null,"version":null},{"id":9,"name":"NodeJS","description":null,"developer":null,"version":null}]},{"id":21,"name":"Gubee Integrador","description":"Ferramenta de integração para marketplaces","active":false,"value":0.0,"targets":[{"id":4,"name":"Lojista que não desejam possuir ecommerce","description":null},{"id":1,"name":"Ecommerce","description":null},{"id":2,"name":"ERP","description":null}],"technologies":[{"id":10,"name":"MongoDB","description":null,"developer":null,"version":null},{"id":14,"name":"Event Stream","description":null,"developer":null,"version":null},{"id":11,"name":"Java 10","description":null,"developer":null,"version":null},{"id":12,"name":"Kotlin","description":null,"developer":null,"version":null},{"id":13,"name":"Kafka","description":null,"developer":null,"version":null},{"id":15,"name":"Redis","description":null,"developer":null,"version":null}]},{"id":22,"name":"Gubee AntiFraude","description":"Ferramenta especialistas em detecção e prevenção à fraude","active":false,"value":0.0,"targets":[{"id":1,"name":"Ecommerce","description":null},{"id":6,"name":"Venda direta","description":null},{"id":7,"name":"Mobile First","description":null},{"id":5,"name":"Telecom","description":null},{"id":8,"name":"Digital Onboarding","description":null}],"technologies":[{"id":17,"name":"Hadoop","description":null,"developer":null,"version":null},{"id":16,"name":"Big Data Analytics","description":null,"developer":null,"version":null},{"id":19,"name":"Cassandra","description":null,"developer":null,"version":null},{"id":18,"name":"Pig","description":null,"developer":null,"version":null},{"id":13,"name":"Kafka","description":null,"developer":null,"version":null}]}]

我正在尝试使用angular来使用此JSON，但每次都会引发以下错误：

{
  "headers": {
    "normalizedNames": {},
    "lazyUpdate": null,
    "headers": {}
  },
  "status": 0,
  "statusText": "Unknown Error",
  "url": "https://back-end-gubee.herokuapp.com/service/products",
  "ok": false,
  "name": "HttpErrorResponse",
  "message": "Http failure response for https://back-end-gubee.herokuapp.com/service/products: 0 Unknown Error",
  "error": {
    "isTrusted": true
  }
}

这很奇怪，因为请求已通过get方法成功执行。

这是角度请求的响应。

Request URL:https://back-end-gubee.herokuapp.com/service
Request Method:GET
Remote Address:3.225.95.126:443
Status Code:
200
Version:HTTP/1.1
Referrer Policy:no-referrer-when-downgrade

这是我的代码：

服务

import { Products } from './../../models/Product.models';
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})

export class ProductService {


  constructor(private http: HttpClient) { }

  public getProducts(): Observable<Products[]> {
    return this.http.get<Products[]>(
      'https://back-end-gubee.herokuapp.com/service');
    }
}

组件

import { Products } from './../../models/Product.models';
import { ProductService } from './../../services/productService/product.service';
import { Component, OnInit } from '@angular/core';

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

  products: Products[];
  MyError: any;

  constructor(private productService: ProductService) {
    this.getter();
   }

  ngOnInit() {
  }

 getter() {
    this.productService.getProducts().subscribe(
      (data: Products[]) => {
        this.products = data;
        console.log(data);
    },
    (error) => {
      this.MyError = error;
    });
  }
}

我的模特

import { Technology } from './Technology.models';
import { Target } from './Target.models';

export class Products {
 public id: number;
 public name: string;
 public description: string;
 public valuel: number;
 public active: boolean;
 public targets: Target[];
 public technologies: Technology[];
}

我的终点

@Service
@RestController
public class ProductPresentation implements CRUDController<Product> {

    @Autowired
    private ProductService productService;

    @GetMapping("/service")
    @Override
    public ResponseEntity<List<Product>> readAll() {
        return ResponseEntity.ok(productService.readAll());
    }
}

我的实体

@Getter
@Setter
@Entity
public class Product extends Person implements Serializable {

    private boolean active;
    private double value;

    @SerializedName("targets")
    @ManyToMany(fetch = FetchType.EAGER)
    private Set<Target> targets;

    @SerializedName("technologies")
    @ManyToMany(fetch = FetchType.EAGER)
    private Set<Technology> technologies;

    @Builder
    public static Product creat (boolean active, double value, Set<Target> targets, Set<Technology> technologies, String name, String description) {
        Product product =new Product();
        product.setName(name);
        product.setDescription(description);
        product.setActive(active);
        product.setValue(value);
        product.setTargets(targets);
        product.setTechnologies(technologies);

        return product;
    }
}

我在后部使用弹簧靴，在前部使用角钢8。需要帮助，我已停止。谢谢。

Answer 1

除CORS错误外，我没有看到其他任何错误，这是由于标头上没有Access-Control-Allow-Origin而引起的。您可以在http.get(url, options)选项参数中传递此类选项。

Answer 2

当Angular应用程序从另一个域发出请求时，您应该为Spring Boot控制器启用CORS，如：

@Service @RestController 
public class ProductPresentation implements CRUDController<Product> {

    @Autowired
    private ProductService productService;

    @CrossOrigin(origins= "*") // or be more specific e.g. http://localhost:4200
    @GetMapping("/service")
    @Override
    public ResponseEntity<List<Product>> readAll() {
        return ResponseEntity.ok(productService.readAll());
    } 
}

在其中的guides之一上阅读有关带有Spring Boot的CORS的更多信息。

消耗REST API角度8

2 个答案: