В запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin» (ANGULAR) - PullRequest
Новая
       28

В запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin» (ANGULAR)

0 голосов
/ 12 июля 2019

Я делаю угловое приложение, которое отправляет запрос к шлюзу API AWS, который затем вызывает функцию Lambda. Обратите внимание, что я изменил настройки CORS в AWS API GATEWAY, и в качестве заголовка не ожидается ничего, кроме «Acessc-Control-Allow-Origin '

Ниже мой КОД и моя Ошибка 

import { Component, OnInit } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import { HttpHeaders } from '@angular/common/http';



const body = {
  "body": "query{product(name:\"CIB\"){high}}"
}


@Component({
  selector: 'app-grid-tiles',
  templateUrl: './grid-tiles.page.html',
  styleUrls: ['./grid-tiles.page.scss'],
})
export class GridTilesPage implements OnInit {



  constructor(private http: HttpClient) { }
   httpdata;
   ngOnInit() {
      this.http.post("https://3ra64ngnc2.execute-api.us-east-1.amazonaws.com/dev/test",body,{ 
        headers: new HttpHeaders({
          "Access-Control-Allow-Origin": "POST" ,

        })      
      })
      .subscribe((data) => this.displaydata(data));     
   }
   displaydata(data) {this.httpdata = data;}
}

Это ошибка, генерируемая консолью 

Access to XMLHttpRequest at 'https://3ra64ngnc2.execute-api.us-east-1.amazonaws.com/dev/test' from origin 'http://localhost:8100' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

1 Ответ

0 голосов
/ 12 июля 2019

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

Это помогло: URL: https://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.html#how-to-cors-console Включите CORS для ресурса с помощью консоли API Gateway Console, точка # 4.

А вот мой угловой код. (Обратите внимание, я использовал http.get) 

 const httpOptions = {
     headers: new HttpHeaders({
         'Content-Type': 'application/json',
         'x-api-key': 'my api key'
     })
};


private batteriesURL: string = 'https....my URL';

getAllBatteries(): Observable<any[]> {
     return this.http.get<any[]>(this.batteriesURL, httpOptions).pipe(
         tap(data => JSON.stringify(data)),
         catchError(this.handleError)
);}

Последнее, что нам нужно было сделать, это обновить php-код на PHP, чтобы разрешить CORS, а затем CORB.

Надеюсь, это поможет.

...