Chrome 的 AngularJS 和 Symfony 3 CORS 问题答案

【问题标题】：AngularJS and Symfony 3 CORS issue with ChromeChrome 的 AngularJS 和 Symfony 3 CORS 问题
【发布时间】：2018-05-19 12:08:49
【问题描述】：

上周我一直在为后端和前端的一个错误而苦苦挣扎。

我制作了一个 REST API (php/symfony) 来管理书籍和作者。我在 DELETE 上的跨域请求上遇到了问题，此后该问题已得到修复。现在我在 PUT（POST）上有一个问题，这仅在 Chrome（v62.0.3202.94）上。在邮递员上尝试了我的 API，它工作得很好，也在 Edge 和 Firefox 上进行了测试。我尝试使用 Chrome 的 Allow-Control-Allow-Origin: * 插件，但也没有用。每次我遇到同样的错误：

Request URL:http://127.0.0.1/whereIsMyBook-symfony/web/app_dev.php/updateAuthor/7
Request Method:OPTIONS
Status Code:405 Method Not Allowed
Remote Address:127.0.0.1:80
Referrer Policy:no-referrer-when-downgrade
Response Headers
view source
Access-Control-Allow-Origin:*
Allow:PUT
Cache-Control:no-cache, private
Connection:Keep-Alive
Content-Type:text/html; charset=UTF-8
Date:Tue, 05 Dec 2017 18:05:06 GMT
Keep-Alive:timeout=5, max=99
Server:Apache/2.4.27 (Win64) PHP/5.6.31
Transfer-Encoding:chunked
X-Debug-Token:e8abc7
X-Debug-Token-Link:http://127.0.0.1/whereIsMyBook-symfony/web/app_dev.php/_profiler/e8abc7
X-Powered-By:PHP/5.6.31
Request Headers
view source
Accept:*/*
Accept-Encoding:gzip, deflate, br
Accept-Language:fr-FR,fr;q=0.9,en-US;q=0.8,en;q=0.7
Access-Control-Request-Headers:access-control-allow-origin,content-type
Access-Control-Request-Method:OPTIONS
Connection:keep-alive
Host:127.0.0.1
Origin:http://localhost:8000
User-Agent:Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36

我的后端抛出异常：

angular.js:12265 OPTIONS http://127.0.0.1/whereIsMyBook-symfony/web/app_dev.php/updateAuthor/7 net::ERR_ABORTED

我尝试修改我的 app.config.js 并添加以下行：

['$httpProvider', function ($httpProvider) {
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
    $httpProvider.defaults.headers.post['Accept'] = 'application/json, text/javascript';
    $httpProvider.defaults.headers.post['Content-Type'] = 'application/json; charset=utf-8';
    $httpProvider.defaults.useXDomain = true;
}]

我认为我对飞行前请求有疑问，但似乎无法正确摆脱它们。我浏览了很多页面，仍然找不到它不起作用的原因。正如 Leia 曾经说过的：“你是我最后的希望”。

这是我的方法（在服务中）：

this.editAuthor= function(formData, index){
         return $http({
            method : 'PUT',
            url : baseUrl + '/updateAuthor/' + index,
            data : formData,
            headers: {
                'Access-Control-Allow-Origin' : '*',
                'Content-Type': 'application/json'
            }
        })
    }

我的 API 托管在 localhost 上的 wamp 上，并激活了 apache headers_module。

感谢您的热心帮助

【问题讨论】：

您需要在 API 上添加 CORS 标头，因为 API 和前端运行在不同的端口上。这个包应该允许你这样做：github.com/nelmio/NelmioCorsBundle 如果你已经在使用这个包，那么检查allow_methods: ['POST','GET','DELETE','PUT'] 配置设置
好的，它可以工作 :-) 非常感谢您抽出宝贵的时间！！！！
嗨贾斯汀，你能接受我的回答吗？这是我帮助你的奖励:)

标签： javascript php angularjs symfony google-chrome

【解决方案1】：

您正在使用 Angular，此框架使用 HTTP OPTIONS 请求向服务器询问后端应用程序中授权的 HTTP 动词。

我们可以从服务器的响应中看到一些有用的信息来调试您的错误

Status Code:405 Method Not Allowed，这个HTTP错误码是后端（这里是Symfony）无法处理这条路由上的请求时返回的
Allow:PUT，服务器返回它可以处理的动词

安装NelmioCorsBundle 后，将此配置添加到您的app/config/config.yml 文件中。

nelmio_cors:
        paths:
            '^/api/':
                allow_origin: ['*']
                allow_headers: ['Origin', 'X-Requested-With', 'Content-Type', 'Accept', 'Authorization']
                allow_methods: ['POST', 'PUT', 'GET', 'DELETE', 'OPTIONS']
                max_age: 0

我建议你为你的 symfony 的 api 应用程序定义一个基本路由，比如 /api 而不仅仅是 /update

如果有什么不清楚的地方请告诉我:)

【讨论】：

没问题，你能验证答案吗？ :) @贾斯汀

【解决方案2】：

您必须在 Symfony 中将以下代码添加到您的控制器 API：

        $jsonContent='{"products":[{"id":1,"nom":"aza","prix":5}]}';
        $response = new Response($jsonContent);
        // $response->headers->set('Content-Type', 'application/json');
        $response->headers->set('Access-Control-Allow-Origin', '*');
        $response->headers->set('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, 
        PUT, PATCH, DELETE');
        $response->headers->set('Access-Control-Allow-Headers' , 'Content-Type');

        return $response;

【讨论】：