Antwort auf Preflight-Anfrage nicht passieren Kontrolle der Zugangskontrolle mit Angular 2

Question

Ich versuche, eine Verbindung zu einer API mit Angular 2 herzustellen. Ich bin nicht in der Lage zu verbinden, da es mir eine OPTIONS Fehler gibt:

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:3000' is therefore not allowed access. The response had HTTP status code 500.

Ich habe das Google Chrome-Plugin sowie die Header. Hier ist der Code

map.service.ts

import { Injectable } from '@angular/core'; 
import { Headers, Http } from '@angular/http'; 
import 'rxjs/add/operator/map'; 


@Injectable() 
export class MapService { 

    private headers = new Headers(); 
    constructor(private http: Http) { } 



    getMarkers() { 
     this.headers.append("Access-Control-Allow-Origin", '*'); 
     this.headers.append("Access-Control-Allow-Methods", 'GET, POST, PATCH, PUT, DELETE, OPTIONS'); 
     this.headers.append("Access-Control-Allow-Headers", 'Origin, Content-Type, X-Auth-Token'); 
     this.headers.append("Authorization", 'Bearer ' + 'mysecretcode'); 
     return this.http.get('https://api.yelp.com/v3/businesses/search?location=suo&limit=50', { headers: this.headers}) 
      .map(response => response.json()); 
    } 

} 

map.component.ts

import { Component } from '@angular/core'; 
import { OnInit } from '@angular/core'; 

import { Marker } from '../../models/map/marker'; 
import { MapService } from '../../services/map/map.service'; 
import {Observable} from 'rxjs/Rx'; 
import {Http, Response, Headers } from '@angular/http'; 

@Component({ 
    moduleId: module.id, 
    selector: 'map-view', 
    templateUrl: 'map.component.html', 
    styleUrls: ['map.component.css'], 
}) 

export class MapComponent { 

    marker: Object; 

    constructor(mapService: MapService) { 
     mapService.getMarkers() 
      .subscribe(
       marker => this.marker = marker, 
       error => console.error('Error: ' + error), 
       () => console.log('Completed!') 
      ); 
    } 

Ich verstehe, dass dies höchstwahrscheinlich ein Problem mit CORS. Ist das etwas, was ich tun kann, um zu reparieren oder ist dies auf Yelps Ende?

EDIT:

Hier einer der Fehler ist:

Error: Response with status: 0 for URL: null(anonymous function) @ map.component.ts:24SafeSubscriber.__tryOrUnsub @ Subscriber.ts:238SafeSubscriber.error @ Subscriber.ts:202Subscriber._error @ Subscriber.ts:139Subscriber.error @ Subscriber.ts:109Subscriber._error @ Subscriber.ts:139Subscriber.error @ Subscriber.ts:109onError @ http.umd.js:1186ZoneDelegate.invokeTask @ zone.js:262onInvokeTask @ core.umd.js:7768ZoneDelegate.invokeTask @ zone.js:261Zone.runTask @ zone.js:151ZoneTask.invoke @ zone.js:332 

Answer 1

Der Grund für die Flugvorbereitung andernfalls ist ein Standardproblem mit CORS:

How does Access-Control-Allow-Origin header work?

Es ist fest indem der Server den richtigen Access-Control-Allow-Origin setzt.

Die Ursache Ihres Problems könnte jedoch in einer Fehlkonfiguration Ihres Servers oder Ihres Clients liegen, da 500 der interne Fehler des Servers ist. Es wird also möglicherweise nicht auf den beabsichtigten Servercode zugegriffen, sondern auf einen generischen Handler in Apache oder was auch immer den Dienst hostet. Die meisten generischen Fehlerhandler bieten keine CORS-Unterstützung als Standard.

Hinweis: Wenn Sie die REST-API verwenden, ist 500 kein Code, den Sie in einem erfolgreichen API-Verwendungsszenario sehen sollten. Dies bedeutet, dass der Server die Anforderung nicht ordnungsgemäß verarbeiten kann.

Vielleicht wäre dieser Link relevanten Informationen haben: EXCEPTION: Response with status: 0 for URL: null in angular2