Angular Httpclient имеет ошибку CORS против, но не получает

Question

Я заметил проблему с кросс-доменом в моем angular приложении.

Если я использую fetch метод для xml запроса файла, он работает.

@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

Если вы используете HttpClient, angular по умолчанию добавит заголовок Content-Type со значением application/json

При наличии этого заголовка запрос на получение файла XML не является ' простой запрос », и поэтому будут выполняться проверки CORS.

Дополнительная информация здесь

Попробуйте указать responseType следующим образом, для заголовка Content-type должно быть установлено значение text/plain и предотвратить проверки CORS. И в любом случае это, вероятно, то, что вам нужно, поскольку вы пытаетесь получить файл xml, а не json данные.

httpClient.get<any>(url, {responseType : 'text'})

Answer 2

Поскольку Fetch API и XMLHttpRequest API имеют разные возможности. В этом случае Angular использует XMLHttpRequest . В то время как Fetch может выполнять запросы без cors, API XMLHttpRequest не может. Вот почему.