这是我的问题。我有一个关于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的成员提出类似问题的建议,我找不到适合我的解决方案......你有什么想法可以帮助我解决我的问题吗?非常感谢提前:)
答案 0 :(得分:1)
尝试将Content-Type
设置为允许标题
allow_headers: ['X-Custom-Auth', 'Content-Type]
并允许&#39; OPTIONS&#39; (不确定它是否真的需要)
allow_methods: ['POST', 'PUT', 'GET', 'DELETE', 'OPTIONS']