Angular 2 和 Slim 3 Cors 错误

Question

我目前正在尝试将一些 Angular 2 前端与 Slim 3 PHP 后端集成。我有以下 Angular 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")
            );
    }

}

每次我想创建一个新用户时，都会收到以下 cros 错误。

我的 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 header，并且请求的域 (localhost:4200) 与后端的域 (localhost:8080) 不同，Chrome自动拒绝请求。您需要将 Access-Control-Allow-Origin: localhost:4200 header 添加到后端的响应中。 Google CORS 获取更多信息。

Angular 2 和 Slim 3 Cors 错误

Angular 2 and Slim 3 Cros error

slim-3

angular