0
Angular 2を使用しているIonic CLIを使用して新しいプロジェクトを作成しました。Google Place APIを呼び出そうとしていますが、引き続きCORSの問題が発生しています。 APIを呼び出してPostmanとChrome内でデータを取得することはできますが、Ionicアプリケーション内で呼び出しを行うと機能しません。Google Places APIを呼び出すときの2 CORSの問題
これは私がブラウザコンソールで取得しています現在のエラーです：ここでは
XMLHttpRequest cannot load https://maps.googleapis.com/maps/api/place/textsearch/json?query=steak&key=API_KEY_GOES_HERE. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.
は、私はいくつかのヘッダを追加しようとした後、私は私のプロバイダを持っているコードです：
import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import { Place } from '../models/place';
@Injectable()
export class Places {
private apiKey = "KEY_GOES_HERE";
private apiUrl = "https://maps.googleapis.com/maps/api/place";
private headers = new Headers({ 'Accept': 'application/json' })
private options = new RequestOptions({});
constructor(public http: Http) {
this.headers.append("Access-Control-Allow-Origin", "*");
this.headers.append("Access-Control-Allow-Headers", "origin, content-type, accept, authorization");
this.headers.append("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS, HEAD");
this.options.headers = this.headers;
}
getPlaces(keyword:string): Observable<Place[]> {
return this.http.get(`${this.apiUrl}/textsearch/json?query=` + encodeURIComponent(keyword) + `&key=` + this.apiKey, this.options)
.map(res => <Place[]>res.json());
}
}
私のイオンアプリケーションでAPI呼び出しを行うことができないのはなぜですか？どうすれば修正できますか？
ヘッダーを削除すると、一般的なCORSエラーが発生します。