(未知URL)角4的HTTP故障响应

Question

我在系统上有两个服务器。一个端口服务角度项目，另一个端口。我正在使用Laravel制作的后端来以JSON格式做出响应。我已经制作了Angular项目，在该项目中，我实施了一项服务来从端口消耗数据并显示列表。正如我在浏览器中的"开发人员工具的网络"选项卡中看到的那样，Angular正在从后端服务器中检索文本，但是列表并未显示。它只是显示了这个错误。这是代码

blog-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>

blog-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);
  }
}

network-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

在public/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');

并检查此和此