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

IT技术 javascript json angularjs
2021-02-18 04:43:57

我正在尝试通过 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 中的开发控制台向我展示了这一点：

在此处输入图片说明

当我从 POST 更改为 PUT 时，我发送的是一个 OPTIONS 调用而不是 PUT。并且内容类型仅切换到content-type.

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

在此处输入图片说明

如何正确设置我的标题？

编辑：

PHP 后端设置了一些标头：

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

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

有什么遗漏吗？

2个回答

好的，我已经解决了。

出了什么问题？
DELETE、PUT 和 POST 的 CORS 工作流程如下：

在此处输入图片说明

它的作用是：

  1. 检查将要发出哪个请求
  2. 如果是 POST、PUT 或 DELETE
  3. 它首先发送一个 OPTION 请求以检查发送请求的域是否与来自服务器的域相同。
  4. 如果没有，它希望允许一个 Access-Header 发送这个请求

重要提示：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. 来自带有端口的特定子域的 Access-Control-Allow-Origin

我能找到的最好的网站，以了解有关 CORS 的更多信息。

它通常不仅限于角
2021-04-26 04:43:57
我们可以使用它而不是创建 blank.php RewriteRule ^(.*)$ $1 [R=200,L,E=HTTP_ORIGIN:%{HTTP:ORIGIN}]]
2021-05-04 04:43:57
谢谢@gruberb。您的信息帮助我理解为什么我得到了 OPTION 而不是 POST。
2021-05-10 04:43:57
或者你可以添加 header("Access-Control-Allow-Headers: X-Requested-With, Content-Type, Origin, Authorization, Accept, Client-Security-Token, Accept-Encoding"); 到您的 php 脚本 - youtube.com/watch?v=GJAe8cZmmAs
2021-05-13 04:43:57
恭喜。我从未见过如此完整的 CORS 解释。
2021-05-17 04:43:57

您不需要$http手动指定您的标头，这一切都是在幕后为您完成的，它们会自动设置为application/jsonforPOST和PUTtype requests。所以你应该做的就是

$http.post(url, data);
$http.put(url, data);
@gruberb，您应该尝试阅读这篇文章：developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
2021-04-19 04:43:57
DELETE 方法默认具有内容类型：text/plain
2021-04-23 04:43:57
我删除了它，但后来我发送了一个 OPTIONS 调用而不是 PUT/POST。如果我设置了它们，至少我正在发送正确的电话。
2021-05-13 04:43:57
其它你可能感兴趣的问题
上一篇调试消息“资源被解释为其他但使用 MIME 类型应用程序/javascript 传输” 下一篇滚动页面时如何使 <div> 上下移动？