Question

使用NelmioCorsBundle解决。

我使用角度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>

Answer 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请求跨域，并且会自动触发浏览器在尝试OPTIONS之前做一个COR“预检”PUT请求 - 检查服务器是否正常。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests有更多细节，但这是问题中具体案例的要点。

请注意，你没有遇到Postman的原因包括这样一个事实，即不像浏览器，Postman不做任何CORS预检OPTIONS请求，无论如何也是Postman不受交叉来源约束的事实请求浏览器强制执行webapps中的前端JavaScript代码。

Answer 2

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

无法使用HttpClient，Angular 4和Symfony后端发送数据

2 个答案: