Angular和Java API的DNS问题

我从角度开始。我有一个项目与角+弹簧启动（+BDD）。我试图通过HTTP POST将用户与表单连接，但在使用DNS时遇到问题（我使用duckDNS而不是我的公共IP）。 我试过这个：

• 角度部分在我的计算机上是本地的，服务器部分在我的树莓上
• 角度部分和服务器部分在我的树莓上。 在我的春季开机时，我添加了swagger，我可以通过局域网IP、公共IP和DNS（MyDuckDNS.org）进行通话，一切都可以通过桌面和移动设备进行。另一方面，当我将我的公共IP用于Angular时，它不起作用，以下是我所做的不同测试：

具有角度局部：

WEB Desktop (Chrome) -> url : 192.168.1.A:1234 (PC dev with Angular) -> http Post : 192.168.1.B:8180 (Raspberry with Spring BOOT + BDD) => OK
WEB Desktop (Chrome) -> url : 192.168.1.A:1234 (PC dev with Angular) -> http Post : IPPublic:8180 (Raspberry with Spring BOOT + BDD) => OK
WEB Desktop (Chrome) -> url : 192.168.1.A:1234 (PC dev with Angular) -> http Post : MyDuckDNS.org:8180 (Raspberry with Spring BOOT + BDD) => OK
Mobile (safari) or tablet (chrome) -> url : 192.168.1.A:1234 (PC dev with Angular) -> http Post : 192.168.1.B:8180 (Raspberry with Spring BOOT + BDD) => OK
Mobile (safari) or tablet (chrome) -> url : 192.168.1.A:1234 (PC dev with Angular) -> http Post : IPPublic:8180 (Raspberry with Spring BOOT + BDD) => OK
Mobile (safari) or tablet (chrome) -> url : 192.168.1.A:1234 (PC dev with Angular) -> http Post : MyDuckDNS.org:8180 (Raspberry with Spring BOOT + BDD) => KO

带棱角锉：

Same local ...
Mobile (safari) or tablet (chrome) -> url : MyDuckDNS.org:1234 (PC dev with Angular) -> http Post : MyDuckDNS.org:8180 (Raspberry with Spring BOOT + BDD) => KO

Angular以“npm run start”和package.json中的参数“ng serve--host 0.0.0--disable host check”开始

我的http post代码： AccountService.ts：

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, BehaviorSubject } from 'rxjs';
import { environment } from 'src/environments/environment';
import { User } from 'src/assets/class/user';
import { map } from 'rxjs/operators';
import { Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class AccountService {

  private userSubject: BehaviorSubject<User>;
  public user: Observable<User>;


  constructor(private http: HttpClient, private router: Router,) { 
    this.userSubject = new BehaviorSubject<User>(JSON.parse(localStorage.getItem('user')));
    this.user = this.userSubject.asObservable();
  }
 
  //permet de se connecter
  login(username, password) {
    alert("login");
    let headers = new HttpHeaders();
    headers.set('host', 'keep-alive');
    headers.set('Content-Type', 'application/json');
    headers.set("accept-encoding", "fr-FR,fr;q=0.9,en-US;q=0.8,en;q=0.7");
    //headers.set("Access-Control-Allow-Origin", "*");

    return this.http.post<User>(`${environment.backendServer}account/authenticate`, { username, password }, { headers: headers })
        .pipe(map(user => {
            // stock dans le context le user et le jwt tOKen dans la local storage 
            localStorage.setItem('user', JSON.stringify(user));
            this.userSubject.next(user);
            return user;
    }));
  }
}

login.component.ts：

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { AccountService } from '../account.service';
import { first } from 'rxjs/operators';
import { User } from 'src/assets/class/user';
import { BehaviorSubject } from 'rxjs';
import { HttpClient, HttpEventType, HttpErrorResponse, HttpResponse } from '@angular/common/http';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
    public form: FormGroup;
    public loading: boolean = false;
    public submitted: boolean = false;
    public returnUrl: string;
 
    constructor(
        private formBuilder: FormBuilder,
        private route: ActivatedRoute,
        private router: Router,
        private accountService: AccountService,
        private httpClient: HttpClient
    ) { }

    ngOnInit() {
        // redirection
        this.returnUrl ='/index';
    }

    // convenience getter for easy access to form fields
    get f() { return this.form.controls; }

    onSubmit() {
        console.log('onSubmit');

        this.submitted = true;

        // if invalid => stop
        if (this.form.invalid) {
            return;
        }

        this.loading = true;
        //login service
        this.accountService.login(this.f.username.value, this.f.password.value)
            .pipe(first())
            .subscribe(
                data => {
                    alert("Connexion OK");
                    console.log('Connexion reussi');
                    this.router.navigate([this.returnUrl]);
                },
                error => {
                    alert("Error : "+JSON.stringify(error));
                    console.log('Erreur de connexion');
                    this.loading = false;
                    this.accountService.logout();
                });
    }
}

我的日志错误来自角度：

{“headers”：{“normalizedNames”：{}，“lazyUpdate”：null，“headers”：{}，“status”：0，“statusText”：“未知错误”，“url”：null，“ok”：false，“name”：“HttpErrorResponse”，“message”：“Http失败响应（未知url）：0未知错误”，“错误”：{“isTrusted”：true}

你能帮我吗

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { AccountService } from '../account.service';
import { first } from 'rxjs/operators';
import { User } from 'src/assets/class/user';
import { BehaviorSubject } from 'rxjs';
import { HttpClient, HttpEventType, HttpErrorResponse, HttpResponse } from '@angular/common/http';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
    public form: FormGroup;
    public loading: boolean = false;
    public submitted: boolean = false;
    public returnUrl: string;
 
    constructor(
        private formBuilder: FormBuilder,
        private route: ActivatedRoute,
        private router: Router,
        private accountService: AccountService,
        private httpClient: HttpClient
    ) { }

    ngOnInit() {
        // redirection
        this.returnUrl ='/index';
    }

    // convenience getter for easy access to form fields
    get f() { return this.form.controls; }

    onSubmit() {
        console.log('onSubmit');

        this.submitted = true;

        // if invalid => stop
        if (this.form.invalid) {
            return;
        }

        this.loading = true;
        //login service
        this.accountService.login(this.f.username.value, this.f.password.value)
            .pipe(first())
            .subscribe(
                data => {
                    alert("Connexion OK");
                    console.log('Connexion reussi');
                    this.router.navigate([this.returnUrl]);
                },
                error => {
                    alert("Error : "+JSON.stringify(error));
                    console.log('Erreur de connexion');
                    this.loading = false;
                    this.accountService.logout();
                });
    }
}