laravel （未知 url）Angular 4 的 Http 失败响应

Http failure response for (unknown url) Angular 4

提问by Dushyant Suthar

I am having two servers ON on system. One port serving Angular project and another one Laravel. I am using backend made in Laravel to give response in json format. I have made Angular project in which I have implemented an service to consume data from the port and display the list. As I can see in the network tab of developer tools in browser, Angular is retrieving the text from the backend server but however the list is not being displayed. It just shows that error. Here is the code

我在系统上有两台服务器。一个端口为 Angular 项目服务，另一个端口为 Laravel。我正在使用 Laravel 制作的后端以 json 格式提供响应。我制作了一个 Angular 项目，其中我实现了一个服务来使用来自端口的数据并显示列表。正如我在浏览器中开发人员工具的网络选项卡中看到的那样，Angular 正在从后端服务器检索文本，但是没有显示列表。它只是显示该错误。这是代码

blog-list.component.html

博客列表.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

博客列表.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

网络操作.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 Response

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"}]

Error Text

错误文本

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). 

回答by krezus

Add these lines on public/index.php file

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

and check this thisand this

并检查这个和这个