對預檢請求的響應未通過對Angular 2的訪問控制檢查

我試圖使用Angular 2連接到API。我無法連接到它，因爲它給我一個OPTIONS錯誤以及：對預檢請求的響應未通過對Angular 2的訪問控制檢查

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

來源

2016-12-15 Lewis

運行Chrome瀏覽器使用'--no-網絡security'標誌。 – 2016-12-15 18:47:51

@torazaburo給了這個嘗試沒有運氣。 – Lewis

你必須查看細節。例如，您還需要指定'--user-data-dir'選項，並且它必須是一個乾淨的新的Chrome實例，例如，啓動時您的計算機上不能運行任何Chrome進程。 – 2016-12-15 19:25:48

原因飛行前的失敗是一個標準的問題CORS：

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

它是固定的通過讓服務器設置正確的Access-Control-Allow-Origin。

但是，您的問題的根本原因可能是您的服務器或客戶端配置錯誤，因爲500是服務器內部錯誤。所以它可能不會訪問預期的服務器代碼，而是一些apache中的通用處理程序或任何託管服務的通用處理程序。大多數通用錯誤處理程序不提供CORS支持作爲默認處理。

請注意，如果您使用的是REST API，則500不是應該在成功的API使用場景中看到的代碼。這意味着服務器無法正確處理請求。

也許這個鏈接就會有相關的信息： EXCEPTION: Response with status: 0 for URL: null in angular2

來源

2016-12-15 18:51:41

感謝您的快速響應。我已經通過Postman的身份驗證測試了URL，並獲得了結果。你認爲它可能是服務器？ – Lewis

500是內部服務器錯誤代碼。根據您的體系結構，它可能來自您自己的服務器代碼或服務器框架，或來自爲您執行代理的某個Web服務器。不過，這是服務器組件報告錯誤，並且不會響應設置標題。錯誤數據包含什麼？ –

我在帖子中添加了錯誤。我看到很多「訂閱者」錯誤。你相信那可以嗎？ – Lewis

對預檢請求的響應未通過對Angular 2的訪問控制檢查

回答

相關問題