Angular、CORS 和 Spring 的问题答案

【问题标题】：Problems with Angular, CORS and SpringAngular、CORS 和 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") 行。

标签： angularjs spring post cors

【解决方案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");

【讨论】：