Угловая 2 и Slim 3 Ошибка Cros

Question

Я в курсе пытается интегрировать некоторый интерфейс Angular 2 с Slim 3 PHP backend. У меня есть следующая Угловая 2 услуги:

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

} 

Everytime, когда я хочу, чтобы обрешетка нового пользователя получить следующую КРОС ошибки.

Мой 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 для получения дополнительной информации.