Angular、CORS 和 Spring 的问题
Posted
技术标签:
【中文标题】Angular、CORS 和 Spring 的问题【英文标题】：Problems with Angular, CORS and Spring 【发布时间】：2015-05-13 00:33:54 【问题描述】：我有一个基于 @RestController 和 AngularJS 的简单项目。 我可以从 Angular 向 @RestController 发送 GET 请求，但我无法发送 POST 请求。我在浏览器控制台中有错误：
XMLHttpRequest 无法加载 http://localhost:8080/add。 Access-Control-Allow-Headers 不允许请求标头字段 Content-Type。
我的@RestController：
@RestController
public class AngularController
//@Autowired
// PhraseService phraseService;
Logger logger = LoggerFactory.getLogger(this.getClass());
@RequestMapping(value = "/add", method = RequestMethod.POST)
public void add(@RequestBody String str)
logger.info("Added");
logger.info(str);
@RequestMapping("/")
public void angularController();
logger.info("Request!");
这是我的 CORS 过滤器：
@Component
public class SimpleCORSFilter implements Filter
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException
HttpServletResponse response = (HttpServletResponse) res;
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
response.setHeader("Content-Type", "application/json");
chain.doFilter(req, res);
public void init(FilterConfig filterConfig)
public void destroy()
我的 AngularJS 控制器：
function addController($scope, $http)
$scope.url = 'http://localhost:8080/add';
$scope.addPhrase = function()
$http.post($scope.url, "data": $scope.value);
还有index.html：
<!doctype html>
<html ng-app>
<head>
<title>Hello AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="server.js"></script>
</head>
<body>
<div ng-controller="addController">
<form>
<input type="text" np-model="value"/>
<button type="button" ng-click="addPhrase()">Send!</button>
</form>
</div>
</body>
</html>
我试图用 header: "Content-Type": "application/json" 解决这个问题，但它给了我 Bad request 错误。
【问题讨论】：
检查this，您可能需要将"Content-Type" 添加到response.setHeader("Access-Control-Allow-Headers", "x-requested-with") 行。
【参考方案1】：
在 Spring 4.2 及后续版本中，对 CORS 提供了开箱即用的一流支持。详情请见page。
在带有RESTController注解的Spring类中，可以使用@CrossOrigin注解。以下代码表示相同：
@CrossOrigin(origins = "http://localhost:3000", maxAge = 3600)
@RestController
public class AngularController
在上面的代码中，localhost:3000 代表 Angular 应用 URL。
【讨论】：
【参考方案2】：您还可以考虑使用即将发布的 Spring Framework 4.2 版本中提供的本机 CORS 支持。详情请见this blog post。
默认情况下，它被配置为自动接受所有标头，因此只要您使用 CrossOrigin 注释或 Java 配置启用 CORS 支持，它就会工作。
【讨论】：
【参考方案3】：您需要在Access-Control-Allow-Headers中添加其他选项
以下是常用的选项：
response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
【讨论】：
以上是关于Angular、CORS 和 Spring 的问题的主要内容，如果未能解决你的问题，请参考以下文章
Spring + Angular 2 + Oauth2 + CORS 的 CSRF 问题
Angular 10 和 Spring Boot 1.5 之间的 CORS 问题
CORS 起源问题 - Spring Boot 和 Angular 4
spring CORS 和 Angular 不起作用：HTTP 状态代码 403 错误