Angular $ http发送OPTIONS而不是PUT / POST

时间:2015-05-15 07:48:45

标签: javascript json angularjs

我正在尝试通过PHP后端在MySQL数据库中更新/插入数据。我正在使用AngularJS构建前端并使用$http服务与REST API进行通信。

我的设置如下:

我通过$ httpProvider设置标头:

 $httpProvider.defaults.withCredentials = true;
 $httpProvider.defaults.headers = {'Content-Type': 'application/json;charset=utf-8'};

POST-Call看起来像这样:

   return $http({
      url: url,
      method: "POST",
      data: campaign
    });

Chrome中的开发者控制台向我显示:

enter image description here

当我从POST更改为PUT时,我正在发送OPTIONS调用而不是PUT。内容类型只切换到content-type

我的请求有效负载作为对象发送:

enter image description here

  

如何正确设置标题?

修改

PHP后端设置了一些标题:

   $e->getResponse()
              ->getHeaders()
              ->addHeaderLine('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');

   $e->getResponse()
              ->getHeaders()
              ->addHeaderLine('Access-Control-Allow-Origin', '*');
  

有什么遗失吗?

2 个答案:

答案 0 :(得分:70)

好的,我已经解决了。

问题是什么?
DELETE,PUT和POST的CORS工作流程如下:

enter image description here

它的作用是:

  1. 检查将要提出的请求
  2. 如果是POST,PUT或DELETE
  3. 首先发送一个OPTION请求,以检查发送请求的域是否与来自服务器的域相同。
  4. 如果不是,则希望允许Access-Header发送此请求
  5.   

    此处重要: OPTIONS请求不会发送凭据

    所以我的后端服务器不允许PUT请求。

    <强>解决方案:
    将其放在.htaccess文件

    RewriteCond %{REQUEST_METHOD} OPTIONS
    RewriteRule ^(.*)$ blank.php [QSA,L]
    Header set Access-Control-Allow-Origin "http://sub.domain:3000"
    Header always set Access-Control-Allow-Credentials "true"
    Header always set Access-Control-Max-Age "1000"
    Header always set Access-Control-Allow-Headers "X-Requested-With, Content-Type, Origin, Authorization, Accept, Client-Security-Token, Accept-Encoding"
    Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
    

    在此之后,在公共文件夹中创建一个名为blank.php的空.php文件。

    编辑:正如一位评论者所指出的,您可以将此重写规则添加到.htaccess文件中,而不是创建一个空的PHP文件;

    RewriteRule ^(.*)$ $1 [R=200,L,E=HTTP_ORIGIN:%{HTTP:ORIGIN}]]
    

    澄清:

    1. 我已经发送了Access-Control-Header
    2. 它解决的是前两行,
    3. 具有端口
    4. 的特定子域的Access-Control-Allow-Origin

      我可以找到learn more about CORS的最佳网站。

答案 1 :(得分:4)

您不需要手动指定$http标题,这些都是在幕后为您完成的,application/json和{{POST会自动设置为PUT 1}}输入请求。所以你应该做的就是

$http.post(url, data);
$http.put(url, data);