Ошибка Angular при использовании json API с python anywhere- была заблокирована CORS

я хочу получить доступ к api с помощью angular. api размещен на pythonanywhere. При доступе к API я получаю следующую ошибку:

Доступ к выборке по адресу 'https://www.pythonanywhere.com/api/v0/user/myusername/cpu/?format=json' из источника 'http://localhost:4200' был заблокирован политикой CORS: Ответ на запрос preflight не проходит проверку контроля доступа: На запрошенном ресурсе отсутствует заголовок 'Access-Control-Allow-Origin'. Если непрозрачный ответ отвечает вашим потребностям, установите режим запроса на 'no-cors', чтобы получить ресурс с отключенным CORS.

.

data-analysis.component.ts:26 ERROR HttpErrorResponse {headers: HttpHeaders, status: 504, statusText: 'Gateway Timeout', url: 'https://www.pythonanywhere.com/api/v0/user/StevoEs/cpu/?format=json', ok: false, ...}

.

python-anywhere.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';


@Injectable({
  providedIn: 'root'
})
export class PythonAnywhereService {
  private host = 'www.pythonanywhere.com';
  private username = 'myUsername';
  private token = 'myToken';

  constructor(private http: HttpClient) {}


  getCpuData(): Observable<any> {
    const headers = new HttpHeaders({
      'Authorization': `Token ${this.token}`
    });
    return this.http.get<any>(
      `https://${this.host}/api/v0/user/${this.username}/cpu/?format=json`,
      { headers }
    );
  }
}

data-analyse.component.ts

import { Component, OnInit } from '@angular/core';
import { PythonAnywhereService } from '../../services/python-anywhere.service';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Component({
  selector: 'app-data-analyse',
  template: `
  <div class="card text-center bg-dark">
    <div class="card-header">
      Server CPU auslastung!
    </div>
    <div class="card-body">
      <div *ngIf="cpuData">
        {{ cpuData }}
      </div>
    </div>
  </div>
  `
})
export class DataAnalysisComponent  implements OnInit {
  cpuData: any;

  constructor(private pythonAnywhereService: PythonAnywhereService) {}

  ngOnInit() {
    this.pythonAnywhereService.getCpuData().subscribe(data => {
      this.cpuData = data;
    });
  }


}

Я прочитал документацию по Angular. Но я ничего не понял. Поиск на форумах мне тоже не помог.

Я установил Django на pythonanywhere. Там есть некоторые настройки, но и там я не смог решить проблему.

Я зацензурил здесь имя пользователя и токен.

Кто-нибудь знает, что я могу сделать?

Вернуться на верх