使用 AngularJS 对 PUT 的 CORS 请求无效答案

【问题标题】：Invalid CORS request for PUT with AngularJS使用 AngularJS 对 PUT 的 CORS 请求无效
【发布时间】：2019-03-04 13:29:21
【问题描述】：

我的 Spring 应用程序中有一个如下所示的映射：

@PutMapping(path="/test/{id}")
public @ResponseBody Shop putTest(@PathVariable("id") long id,
                                  @RequestBody User user {
....

当尝试使用 Angular 调用此端点时：

$http({
   method: 'PUT',
   url: 'https://localhost:8000/api/test',
   data: senddata,
   params:{'id':id},
   headers: {
     "Content-Type": "application/json; charset=utf-8"
   }
})

我的请求有问题吗，如果有，我该如何解决？

【问题讨论】：

除了以下答案之外，在 $http 中，不要使用参数。使用喜欢的网址：https://localhost:8000/api/test/${id},

标签： javascript angularjs spring-boot

【解决方案1】：

您的后端必须知道请求来自何处。只是为了您测试该请求，您可以明确请求的来源，只需添加该注释即可。

@CrossOrigin(origins = "http://localhost:9000")
@PutMapping(path="/test/{id}")
public @ResponseBody Shop putTest(@PathVariable("id") long id,
                                  @RequestBody User user {
....

希望对你有用

【讨论】：

...或者这也可以在控制器甚至全局级别上完成：spring.io/guides/gs/rest-service-cors/… 取决于您期望限制的粒度

【解决方案2】：

大概，您的 Spring 应用程序在与您的 Angular 应用程序不同的端口上提供服务？对于浏览器来说，这算作不同的来源，因此请求将失败，除非服务器的响应包含 Access-Control-Allow-Origin 标头。您需要相应地配置您的 spring 应用程序。

这是浏览器的同源策略，保护用户再次跨站请求伪造。例如。想象一下，一个邪恶的策划者创建了一个名为 evil.com 的看似无辜的网站，该网站向各种银行服务器发出大量 AJAX 请求，希望您登录其中一个（即您有一个未过期的 cookie）。除非银行的服务器将其访问控制标头设置为允许来自任何地方的请求（它们不应该），否则请求应该失败。一个 GET 请求实际上会成功，因为浏览器不知道它不应该发送它，直到它从响应中获取标头，但是浏览器会停止 JS 代码读取响应，所以没关系。对于 POST 和 PUT 等“不安全”请求，浏览器首先执行飞行前请求（使用 OPTIONS 方法）以获取标头。如果加载页面的域未包含在允许的来源列表中，则不会发出不安全的请求。

【讨论】：

【解决方案3】：

当 Origin 定义不明确时，这是正常行为。

查看服务器端设置。浏览器在您的 PUT 请求之前发送 OPTIONS 请求。

阅读有关Access-Control-Request-* 标头的更多信息。

【讨论】：