无法使用HttpClient，带有Symfony后端的Angular 4发送数据 [英] Cannot send data with HttpClient, Angular 4 with Symfony backend

问题描述

通过使用NelmioCorsBundle解决.

我在前端使用Angle 4.3.3，在后端使用 Symfony3 ，我也使用 FosRestBundle .

I'm using angular 4.3.3 for frontend and Symfony3 for backend, and I use FosRestBundle also.

在Angular中，我正在与HttpClient一起发送或请求一些数据.

In Angular, and I'm working with HttpClient to send or request some data.

请求数据运行良好，可以显示结果，但是问题是当我尝试发送数据时出现此 cors 错误

Requesting data is working good and I can display the results but the problem is when I try to send data I get this cors error

另一方面，我可以使用 postman

On the other hand I can post json data using postman

这是错误:

1:1 XMLHttpRequest cannot load 
http://127.0.0.1/rest/web/app_dev.php/api/comments/new/1. Response for preflight 
has invalid HTTP status code 405
Error occured.
{"content":"test comment","email":"[e-mail]"}

这是代码类型Script:

and this is the code typeScript:

    import {HttpClient, HttpErrorResponse, HttpHeaders} from '@angular/common/http';

    constructor(private http: HttpClient, private globals: Globals, private activatedRoute: ActivatedRoute) {
}
    postComment(post) {
    const body = JSON.stringify(post);
    this.http.put(this.globals.baseUrl + 'comments/new/' + this.id, body).subscribe(
        res => {
            console.log(res);
        },
        err => {
            console.log('Error occured.');
            console.log(body)
        }
    );
}

在项目中:web/.htaccess

In th symfony Project: web/.htaccess

<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>

推荐答案

为确保您的服务器正确响应 OPTIONS 请求，请将其添加到您的 .htaccess :

To ensure your server responds to the OPTIONS request correctly, add this to your .htaccess:

RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]

为确保发送所有正确的标头，您想要的是这样:

And to ensure all the right headers get sent, what you want is this:

Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Allow-Headers "Content-Type"

而且，顺便说一句，您需要处理该 OPTIONS 请求的原因是，因为您的代码正在尝试执行跨域的 PUT 请求，并触发浏览器在尝试 PUT 之前自动发出CORs预检" OPTIONS 请求-检查服务器是否正常.

And by the way, the reason you need to deal with that OPTIONS request to begin with is because your code is trying to do a PUT request cross-origin, and that triggers browsers to automatically make a CORs "preflight" OPTIONS request before trying the PUT—to check if the server OKs it.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests 具有更多详细信息，但这是该问题中特定情况的要旨.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests has more details, but that’s the gist of it for the specific case in the question.

请注意，您不使用Postman遇到这种情况的原因包括以下事实:与浏览器不同，Postman不会执行任何CORS预检 OPTIONS 请求，并且无论如何，Postman不受此约束浏览器在Web应用程序中的前端JavaScript代码上执行的跨域请求.

And note that the reasons you don’t run into this with Postman include the fact that unlike browsers, Postman does not do any CORS preflight OPTIONS request and anyway also the fact Postman is not bound by cross-origin requests that browsers enforce on frontend JavaScript code in webapps.

这篇关于无法使用HttpClient，带有Symfony后端的Angular 4发送数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！