Angular Httpclient 有 CORS 错误 vs 但 fetch 没有

Question

我注意到我的角度应用程序中存在跨域问题。

如果我使用fetchxml 文件请求方法，它就可以工作。

@Component({
  selector:    'app-xml',
  templateUrl: './app-xml.component.html'
})
export class HeroListComponent implements OnInit {
     constructor( private httpClient: HttpClient) {}

     getXml(){
         fetch(url).then((response:any) => {
             return response.text();
         }).then((text:any) => { console.log(text)})
     }
}

但是如果我使用 Angular HttpClient，它会抛出跨域 Xmlhttprequest 错误。

@Component({
  selector:    'app-xml',
  templateUrl: './app-xml.component.html'
})
export class HeroListComponent implements OnInit {
     constructor( private httpClient: HttpClient) {}

     getXml(){
         httpClient.get<any>(url).subscribe((response:any) => {
             console.log(text)
         })
     }
}

为什么？

Answer 1

因为 Fetch API 和 XMLHttpRequest API 具有不同的功能。在这种情况下，Angular 使用 XMLHttpRequest。虽然 Fetch 可以执行无相关请求，但 XMLHttpRequest API 却不能。这就是为什么。