(unknown url)에 대한 HTTP 오류 응답 각도 4

Question

시스템에 두 개의 서버가 켜져 있습니다. 한 포트는 각도 프로젝트를 지원하고 다른 포트는 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