AngularJS 和 Silex 的 CORS 问题（PHP - Apache）

Posted 2023-03-03

【中文标题】AngularJS 和 Silex 的 CORS 问题（PHP - Apache）

【英文标题】：Issue with CORS for AngularJS and Silex (PHP - Apache)

【发布时间】：2015-04-17 16:29:15

【问题描述】：

我正在尝试配置 CORS，但我不知道我缺少什么。 我使用 Silex (php - Apache) 作为后端，使用 AngularJS 作为前端。 我在 .htaccess 中有这个配置：

Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST, GET, PUT, OPTIONS, PATCH, DELETE"
Header always set Access-Control-Allow-Credentials "true"
Header always set Access-Control-Allow-Headers "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version, X-HTTP-Method-Override, Origin"

RewriteEngine On
RewriteCond %REQUEST_METHOD OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L,E=HTTP_ORIGIN:%HTTP:ORIGIN]]

在 angularJS 的应用配置中，我有：

myApp.config(['$httpProvider', function($httpProvider) 
            $httpProvider.defaults.useXDomain = true;
            delete $httpProvider.defaults.headers.common['X-Requested-With'];
        
    ]);

我在 angularJS 中的服务是这样的：

var headers = 
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'POST, GET, PUT, OPTIONS, PATCH, DELETE',
        'Access-Control-Allow-Headers': 'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version, X-HTTP-Method-Override, Origin'
    ;
    var restConfig = 
        method: 'POST',
        dataType : 'json',
        url: 'http://localapi.com/user/create',
        data: paramData,
        headers: headers
    ;
    return $http(restConfig)
        .success(function (a) 
             console.log('works');
        ).error(function (m) 
             console.log('does not work');
        );

而我在网络中看到的所有信息都是

create | OPTION | (failed)
/user  |        | net::ERR_EMPTY_RESPONSE

虽然，使用 curl 我得到了这个响应

curl -I http://localapi.com/user/create

    HTTP/1.1 200 OK
    Date: Tue, 17 Feb 2015 01:46:06 GMT
    Server: Apache/2.2.26 (Unix) DAV/2 PHP/5.4.24 mod_ssl/2.2.26 OpenSSL/0.9.8y
    Access-Control-Allow-Origin: *
    Access-Control-Allow-Methods: POST, GET, PUT, OPTIONS, PATCH, DELETE
    Access-Control-Allow-Credentials: true
    Access-Control-Allow-Headers: X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version, X-HTTP-Method-Override, Origin
X-Powered-By: PHP/5.4.24
    Cache-Control: no-cache
    Content-Type: application/json

而且我不知道我错过了什么。我在端口 5000 的 nodeJS 中运行有角度。有人可以给我一个提示来解决这个问题吗？

【参考方案1】：

此标头仅在服务器上有效，因此无需在 angular 中设置它们：

var headers = 
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'POST, GET, PUT, OPTIONS, PATCH, DELETE',
    'Access-Control-Allow-Headers': 'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version, X-HTTP-Method-Override, Origin'
;

在角度你应该设置类似：

headers: 
    'Content-Type': 'application/json; charset=UTF-8',
    'Accept': 'application/json, */*; q=0.01',
    'X-CSRFToken': undefined
,

这里是如何设置 csrf 令牌的： AngularJS + Django Rest Framework + CORS ( CSRF Cookie not showing up in client )

您还可以使用网络浏览器的开发者工具查看您的请求是如何发送的。