无法使用 HttpClient、带有 Symfony 后端的 Angular 4 发送数据答案

【问题标题】：Cannot send data with HttpClient, Angular 4 with Symfony backend无法使用 HttpClient、带有 Symfony 后端的 Angular 4 发送数据
【发布时间】：2018-01-11 09:42:19
【问题描述】：

使用 NelmioCorsBundle 解决。

我将 angular 4.3.3 用于前端，Symfony3 用于后端，我也使用 FosRestBundle。

在 Angular 中，我正在使用 HttpClient 发送或请求一些数据。

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

另一方面，我可以使用 postman

发布 json 数据

这是错误：

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":"test@gmail.com"}

这是代码 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)
        }
    );
}

在 symfony 项目中：web/.htaccess

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

【问题讨论】：

405 是“不允许的方法”，对吧？您的服务器需要配置为允许 OPTIONS 请求，并以 200 或 204 成功响应 OPTIONS
@sideshowbarker，当我使用 Postman 时，是的，我用 "content-type: application/json" 发送它，但我不知道如何使用 Angular 设置标题：/
所以您确实需要弄清楚如何设置请求标头，但正如我评论的那样，我认为 405 表明您需要解决的直接问题是您的服务器未配置为正确响应 OPTIONS 请求
我正在使用 Symfony3、FosRestBundle 作为后端，并且我已经配置了 Header 集 Access-Control-Allow-Origin "*"。我将在帖子中添加它
我已经用“NelmioCorsBundle”解决了：）

标签： angular symfony typescript cors fosrestbundle

【解决方案1】：

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

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

为了确保发送所有正确的标头，您需要的是：

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 跨域请求，这会触发浏览器自动生成 COR“ preflight”OPTIONS 请求，然后再尝试 PUT——检查服务器是否正常。

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

请注意，您没有使用 Postman 遇到此问题的原因包括，与浏览器不同，Postman 不执行任何 CORS 预检 OPTIONS 请求，而且 Postman 不受跨域请求的约束浏览器在 webapps 中强制执行前端 JavaScript 代码。

【讨论】：

我已经用“NelmioCorsBundle”解决了：）谢谢

【解决方案2】：

如果客户端和服务器在不同的域上运行，您将遇到 CORS 问题，您需要在服务器端代码上启用 CORS。即使 IP 地址相同但端口不同，域也会被视为不同。

【讨论】：

是的，我在前端使用 angular，在后端使用 symfony，而且我也在使用 FosRestBundle。我已经配置了 Header 集 Access-Control-Allow-Origin "*"。我已经更新了帖子