（不明なURL）のHTTPの失敗の応答角度4

Question

私はシステム上に2台のサーバを持っています。 1つはAngularプロジェクトに対応し、もう1つはLaravelに対応します。私はLaravelで作られたバックエンドを使ってjson形式で応答しています。私はポートからデータを消費してリストを表示するサービスを実装したAngularプロジェクトを作成しました。ブラウザーの開発者ツールのネットワークタブにあるように、Angularはバックエンドサーバーからテキストを取得していますが、リストは表示されていません。それは単にそのエラーを示しています。ここでは、コード

ブログlist.component.html

<div> 
<mat-list role="list"> 
<mat-list-item role="listitem" *ngFor="let blog of blogs">{{blog.id}}</mat-list-item> 
</mat-list> 
</div> 

ブログlist.component.ts

import { Component, OnInit } from '@angular/core'; 
import {NetworkOperationsService} from '../network-operations.service'; 
import {Blog} from '../blog'; 
import {Category} from '../category'; 

@Component({ 
selector: 'app-blog-list', 
templateUrl: './blog-list.component.html', 
styleUrls: ['./blog-list.component.css'] 
}) 
export class BlogListComponent implements OnInit 
{ 
blogs : Blog[]; 
constructor(private networkOperationsService : NetworkOperationsService) 
{} 
ngOnInit() 
{ 
this.getBlogs(); 
} 
getBlogs() : void 
    { 
    this.networkOperationsService.getBlogs() 
    .subscribe(blogs=>this.blogs = blogs); 
    } 
} 

ネットワークoperations.service.ts

です

import { Injectable } from '@angular/core'; 
import { Observable } from 'rxjs/Observable'; 
import { of } from 'rxjs/observable/of'; 
import { HttpClient, HttpHeaders } from '@angular/common/http'; 
import {Blog} from './blog'; 
import {Category} from './category'; 
import {ApiConfigurations} from './api-configurations'; 


@Injectable() 
export class NetworkOperationsService 
{ 
constructor(private http: HttpClient) { } 

getBlogs() : Observable<Blog[]> 
    { 
    return this.http.get<Blog[]>('http://localhost:8000/api/blogs'); 
    } 
} 

JSONレスポンス

[{"id":1,"title":"My Second Blog","body":"Here is the body of my first blogger app","categories":"[1]","created_at":"2017-12-22 11:28:02","updated_at":"2017-12-22 11:32:15"},{"id":2,"title":"Is Android a right choice for career","body":"A lot of people are trying to make android as their primary motive of their lives so please people stop there and watch for more choices and make your choices more sophesticatedly.","categories":"[1]","created_at":"2017-12-22 17:12:26","updated_at":"2017-12-22 17:12:26"},{"id":3,"title":"Is Android a right choice for career","body":"A lot of people are trying to make android as their primary motive of their lives so please people stop there and watch for more choices and make your choices more sophesticatedly.","categories":"[]","created_at":"2017-12-22 17:12:40","updated_at":"2017-12-22 17:12:40"},{"id":4,"title":"Is Android a right choice for career","body":"A lot of people are trying to make android as their primary motive of their lives so please people stop there and watch for more choices and make your choices more sophesticatedly.","categories":"[5]","created_at":"2017-12-22 17:12:45","updated_at":"2017-12-22 17:12:45"},{"id":5,"title":"Is Android a right choice for career","body":"A lot of people are trying to make android as their primary motive of their lives so please people stop there and watch for more choices and make your choices more sophesticatedly.","categories":"[6]","created_at":"2017-12-22 17:12:51","updated_at":"2017-12-22 17:12:51"},{"id":6,"title":"Is Android a right choice for career","body":"A lot of people are trying to make android as their primary motive of their lives so please people stop there and watch for more choices and make your choices more sophesticatedly.","categories":"[8]","created_at":"2017-12-22 17:12:55","updated_at":"2017-12-22 17:12:55"},{"id":7,"title":"Dushyant SUthar","body":"Dushyant SUthar","categories":"Dushyant SUthar","created_at":"2017-12-25 11:20:06","updated_at":"2017-12-25 11:20:06"}] 

エラーテキスト

Angular is running in the development mode. Call enableProdMode() to enable the production mode. 
core.js:3660 
ERROR 
{…} 
error: error 
bubbles: false 
cancelBubble: false 
cancelable: false 
composed: false 
currentTarget: null 
defaultPrevented: false 
eventPhase: 0 
explicitOriginalTarget: XMLHttpRequest { __zone_symbol__xhrSync: false, __zone_symbol__xhrURL: "http://localhost:8000/api/blogs", readyState: 4, … } 
isTrusted: true 
lengthComputable: false 
loaded: 0 
originalTarget: XMLHttpRequest { __zone_symbol__xhrSync: false, __zone_symbol__xhrURL: "http://localhost:8000/api/blogs", readyState: 4, … } 
target: XMLHttpRequest { __zone_symbol__xhrSync: false, __zone_symbol__xhrURL: "http://localhost:8000/api/blogs", readyState: 4, … } 
timeStamp: 25351.271703 
total: 0 
type: "error" 
__proto__: ProgressEventPrototype { lengthComputable: Getter, loaded: Getter, total: Getter, … } 
headers: Object { normalizedNames: Map, lazyUpdate: null, headers: Map } 
message: "Http failure response for (unknown url): 0 Unknown Error" 
name: "HttpErrorResponse" 
ok: false 
status: 0 
statusText: "Unknown Error" 
url: null 
__proto__: Object { constructor: HttpErrorResponse() } 
core.js:1427 
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8000/api/blogs. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). 

Answer 1

のindex.php

header("Access-Control-Allow-Origin: *"); 
header('Access-Control-Allow-Methods: GET, POST, DELETE, PUT, OPTIONS'); 
header('Access-Control-Allow-Headers: Origin, Content-Type, Accept, Authorization, X-Request-With'); 
header('Access-Control-Allow-Credentials: true'); 

を提出し、このthisとthis

をチェック/公衆にこれらの行を追加します。 210