javascript - Chrome 的 AngularJS 和 Symfony 3 CORS 问题

Question

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

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

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;
}]

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

这是我的方法(在服务中):

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 托管在本地主机上的 wamp 上，并激活了 apache headers_module。

谢谢你的帮助

Answer 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

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