Question

我有一个基于@RestController和AngularJS的简单项目。我可以将Angular的GET请求发送到@RestController但我无法发送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>

我尝试用标题来解决这个问题：＆＃34; Content-Type＆＃34;：＆＃34; application / json＆＃34;但它给了我错误的请求错误。

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版本中提供的本机CORS支持。有关详细信息，请参阅this blog post。

默认情况下，它被配置为自动接受所有标头，因此只要您使用CrossOrigin注释或Java配置启用CORS支持，它就应该可以正常工作。

Answer 3

在Spring 4.2及其他版本中，开箱即用的CORS有一流的支持。详细信息可在此page上找到。

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

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

在上面的代码中，localhost：3000表示Angular app URL。

Angular，CORS和Spring的问题

3 个答案: