Angular、CORS 和 Spring 的问题

Question

我有一个基于@RestController 和AngularJS 的简单项目。我可以将 GET 请求从 Angular 发送到 @RestController 但我无法发送 POST 请求。我在浏览器控制台中出现错误：

XMLHttpRequest cannot load http://localhost:8080/add. Request header field Content-Type is not allowed by Access-Control-Allow-Headers.

我的@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" 但它给了我错误的请求错误。

Answer 1

您需要在 Access-Control-Allow-Headers

中添加其他选项

以下是常用的选项：

response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

Answer 2

您还可以考虑使用即将推出的 Spring Framework 4.2 release. See this blog post 中提供的本机 CORS 支持以了解更多详细信息。

默认情况下，它配置为自动接受所有 headers，因此只要您使用 CrossOrigin 注释或 Java 配置启用 CORS 支持，它就会立即工作。

Answer 3

在 Spring 4.2 和后续版本中，第一个 class 支持开箱即用的 CORS。详情可以在这个page.

上找到

在Spring class注解RESTController的es中，可以使用@CrossOrigin注解。以下代码表示相同：

@CrossOrigin(origins = "http://localhost:3000", maxAge = 3600)
@RestController
public class AngularController {
}

上面代码中，localhost:3000代表AngularappURL。

Angular、CORS 和 Spring 的问题

Problems with Angular, CORS and Spring

angularjs

spring

post

cors