エラーHTTP GETオブジェクトリスト

Question

リンク（PHPサーバ）からオブジェクトのリストを取得しようとするとエラーが発生します。マルチ原点要求（クロスオリジンリクエスト）の

ブロッキング：//localhost/eReport/index.php：「同じ 源」ポリシーは HTTPに位置するリモートリソースへのアクセスを許可しません。理由： CORS 「Access-Control-Allow-Headers」CORSヘッダーに「アクセス制御認可元」トークンがありません。

このリンクにはこのtutoのようなヘッダーを追加しましたが、まだこのエラーがあります。

お願いします。

私のサービスページ：

@Injectable() 
export class ReportService{ 
    private baseUrl: string = 'http://localhost/report/reports.php'; 

    constructor(private http : Http){} 
    getAll(): Observable<Report[]>{ 
    let report$ = this.http 
     .get(`${this.baseUrl}`, { headers: this.getHeaders()}) 
     .map(mapReports); 
     return report$; 
    } 

    private getHeaders(){ 
    // I included these headers because otherwise FireFox 
    // will request text/html 
    let headers = new Headers(); 
    headers.append('Accept', 'application/json'); 
    headers.append('Content-Type', 'application/x-www-form-urlencoded;charset=UTF-8'); 
    return headers; 
    } 
    get(id: number): Observable<Report> { 
    let report$ = this.http 
     .get(`${this.baseUrl}/report/${id}`, {headers: this.getHeaders()}) 
     .map(mapReport); 
     return report$; 
    } 

私のPHPページ

header("Access-Control-Allow-Origin: *"); 
     $tab = array(
     array('id'=> '12', 'name'=> 'test','description' => '2018-04-01','url'=>'../../../assets/img/chat1.png'), 
     array('id'=> '13', 'name'=> 'test','description' => '2018-04-01','url'=>'../../../assets/img/highcharts.png') 
    ); 

    echo json_encode($tab); 


?> 

Answer 1

おそらく最速の修正要求が起こっている場合/report/reports.phpに角度アプリでベースURLを変更することですアプリを提供したのと同じサーバーに

クライアントがタイプapplication/jsonのコンテンツを送信すると、ブラウザはリクエストをすぐに送信しないため、リクエストが機能しません。このシナリオでは

Origin: yourserver 
Access-Control-Request-Method: GET 
Access-Control-Request-Headers: Content-Type, Accept 

、ブラウザがにサーバーを期待：あなたは、ブラウザを再起動する場合は、あなたの代わりにあなたのGETの、OPTIONS要求が最初に送信され、それがこれらに類似のヘッダを含んでいることがわかりますネットワーク]タブを観察（あなたがすでにやっている）だけでなくAccess-Control-Allow-Originヘッダを返しますが、これらのすべて：

Access-Control-Allow-Origin: yourserver (or *) 
Access-Control-Allow-Methods: GET (or a list eg: GET, POST, OPTIONS) 
Access-Control-Allow-Headers: Content-Type, Accept (the same headers from above) 

だから、前のブロックからのリクエストヘッダを読み、そしてレスポンスヘッダを設定する際に、それらの値を使用する必要があります。 apache_request_headers()メソッドを使用している場合はかなり簡単です。あなたはまた、$_SERVERスーパーグローバルからそれらを得ることができます。

// set required headers: 
header("Access-Control-Allow-Origin: $_SERVER[HTTP_ORIGIN]"); 
header("Access-Control-Allow-Methods: $_SERVER[HTTP_ACCESS_CONTROL_REQUEST_METHOD]"); 
header("Access-Control-Allow-Headers: $_SERVER[HTTP_ACCESS_CONTROL_REQUEST_HEADERS]"); 

See this helpful article