プリフライト要求に応答して角2のアクセス制御チェックをパスしません

Question

角度2を使用してAPIに接続しようとしていますが、OPTIONSエラーと同様に接続できません：

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.

私はGoogle Chromeプラグインとヘッダーを持っています。ここでは、コード

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!') 
      ); 
    } 

がある私は、これが最も可能性が高いCORSに問題があることを理解しています。これは私が修正するために行うことができますか、これは妖精の終わりですか？

編集：ここでは

は、エラーのいずれかです。

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

飛行前の失敗の理由は、CORSと標準問題です：

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

それが固定されていますサーバーに正しいAccess-Control-Allow-Originを設定させることにより、

ただし、サーバーの内部エラーが500であるため、問題の根本原因はサーバーまたはクライアントの構成ミスである可能性があります。したがって、意図したサーバコードにアクセスすることはできませんが、apacheなどの汎用ハンドラやサービスをホストしているものがあります。ほとんどの一般的なエラーハンドラはCORSサポートをデフォルトとして提供しません。

注REST APIを使用している場合、500は、APIの使用が成功した場合に表示されるコードではありません。これは、サーバーが要求を適切に処理できないことを意味します。 `--no-ウェブsecurity`フラグを使用して EXCEPTION: Response with status: 0 for URL: null in angular2