Question

这是我的问题。我有一个关于Angular 5的前端网站和一个关于Symfony 3.4的后端API。我正在使用FOSRestBundle来发出我的API请求。当我尝试向我的API发出POST请求时，出现错误：“无法加载http://127.0.0.1:8000/api/pro/login：预检的响应包含无效的HTTP状态代码400。”

以下是我的不同代码：

LoginController.php：

<?php

namespace ProBundle\Controller;

use FOS\RestBundle\Controller\Annotations as Rest;
use Proxies\__CG__\ProBundle\Entity\Utilisateur;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\ParamConverter;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
use Symfony\Component\HttpFoundation\Response;

class LoginController extends Controller
{
    /**
     * @Rest\Post(
     *      path = "/api/pro/login",
     *      name = "dropnride_pro_login"
     * )
     * @Rest\View
     * @ParamConverter("utilisateur", converter="fos_rest.request_body")
     */
    public function loginAction(Utilisateur $utilisateur)
    {
        $response = new Response($utilisateur->loginToString());

        return $response;
    }
}

login.component.ts：

import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';
import { LoginService } from '../services/login.service';

@Component({
  selector: 'dropnride-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss'],
  providers: [LoginService]
})
export class LoginComponent {

  constructor(private _loginService: LoginService) { }

  onSubmit(form: NgForm) {
    const email = form.value['email'];
    const password = form.value['password'];
    this.askLogin(email, password);
  }

  askLogin(email: string, motDePasse: string) {
    const userData = {
      email: '',
      motDePasse: '',
    }

    userData.email = email;
    userData.motDePasse = motDePasse;

    // Contact de l'API
    this._loginService.getLoginData(userData);

  }

}

login.service.ts：

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

const loginUrl = "http://127.0.0.1:8000/api/pro/login";

@Injectable()
export class LoginService {

  constructor(private http: HttpClient) {
   }

   getLoginData(userData) {

    const headers = new HttpHeaders({
       'Content-Type': 'application/json'
    });

     console.log(userData);
     return this.http.post(loginUrl, userData, {headers: headers}).subscribe(data => {
       console.log(data);
     });

   }

}

我的API调用适用于Postman： API call through Postman

我在config.yml中安装并配置了NelmioCorsBundle：

nelmio_cors:
    defaults:
        allow_credentials: false
        allow_origin: ['*']
        allow_headers: ['*']
        allow_methods: []
        expose_headers: []
        max_age: 0
        hosts: []
        origin_regex: false
        forced_allow_origin_value: ~
    paths:
        '^/api/':
            allow_origin: ['*']
            allow_headers: ['X-Custom-Auth']
            allow_methods: ['POST', 'PUT', 'GET', 'DELETE']
            max_age: 3600
        '^/':
            origin_regex: true
            allow_origin: ['^http://localhost:[0-9]+']
            allow_headers: ['X-Custom-Auth']
            allow_methods: ['POST', 'PUT', 'GET', 'DELETE']
            max_age: 3600
            hosts: ['^api\.']

我几乎已经尝试了所有其他stackoverflow的成员提出类似问题的建议，我找不到适合我的解决方案......你有什么想法可以帮助我解决我的问题吗？非常感谢提前：）

Answer 1

尝试将Content-Type设置为允许标题

allow_headers: ['X-Custom-Auth', 'Content-Type]

并允许＆＃39; OPTIONS＆＃39; （不确定它是否真的需要）

allow_methods: ['POST', 'PUT', 'GET', 'DELETE', 'OPTIONS']

Nelmio_cors：对API

1 个答案: