角度2とスリム3クロスエラー

Question

私は現在、角2のフロントエンドとスリム3 PHPバックエンドを統合しようとしています。私は、このコンポーネントでは、このサービスを利用

import { Injectable } from '@angular/core'; 
import { Http, Headers, RequestOptions, Response } from '@angular/http'; 
import {Observable} from 'rxjs/Rx'; 
import 'rxjs/add/operator/map'; 

@Injectable() 
export class UserService { 

    constructor(
     private http: Http 
    ) { } 

    create(user: any) { 
     var headers = new Headers(); 
     headers.append('Content-Type', 'application/x-www-form-urlencoded'); 
     let options = new RequestOptions({ headers: headers }); 
     return this.http.post('http://localhost:8080/public/auth/signup', user, {headers: headers}) 
      .map(res => res.json()); 
    } 
} 

：

import { Component, OnInit } from '@angular/core'; 
import { Router } from '@angular/router'; 
import { UserService } from '../user.service'; 

@Component({ 
    selector: 'app-signup', 
    templateUrl: './signup.component.html', 
    styleUrls: ['./signup.component.css'], 
    providers: [UserService] 
}) 
export class SignupComponent implements OnInit { 

    model: any = { }; 
    postData: any; 

    constructor(
     private router: Router, 
     private userService: UserService, 
    ) { } 

    ngOnInit() { 
    } 

    register() { 
     this.userService.create(this.model) 
      .subscribe(
       data => this.postData = JSON.stringify(data), 
       error => alert(error), 
       () => console.log("Finished") 
      ); 
    } 

} 

毎回私は新しいユーザAは、次のCROのエラーが表示さクレートにしたいとき、私は、次の角度2サービスを提供しています。

私のAPIには、次のようになります。問題があると思わ

public function postSignUp($request,$response) 
     { 

      $validation = $this->validator->validate($request, [ 
       'full_name' => v::notEmpty()->alpha(), 
       'email' => v::noWhitespace()->notEmpty()->email()->EmailAvailable(), 
       'password' => v::noWhitespace()->notEmpty(), 
      ]); 

      if($validation->failed()) { 
       return $response; 
      } 

      $new_user = $this->db->insert("users", [ 
       "full_name" => $request->getParam('full_name'), 
       "email" => $request->getParam('email'), 
       "password" => password_hash($request->getParam('password'), PASSWORD_DEFAULT), 
      ]); 

      $this->flash->addMessage('info', 'You have been signed up!'); 

      $auth = $this->auth->attempt(
       $request->getParam('email'), 
       $request->getParam('password') 
      ); 

      echo json_encode($new_user); 
      return $response; 
     } 

何？ありがとうございました！

Answer 1

バックエンドのレスポンスにAccess-Control-Allow-Originヘッダーがなく、要求のドメイン（localhost：4200）がバックエンドのドメイン（localhost：8080）と異なるため、Chromeはリクエストを自動的に拒否します。バックエンドの応答にAccess-Control-Allow-Origin：localhost：4200ヘッダーを追加する必要があります。詳細についてはGoogle CORSをご覧ください。