Angular，CORS和Spring的问题 [英] Problems with Angular, CORS and Spring
问题描述
我有一个基于@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>
我尝试使用标头:"Content-Type":"application/json"解决此问题，但这给了我错误的请求错误.
您也可以考虑使用即将发布的此博客文章. /p>
默认情况下，它被配置为自动接受所有标头，因此，只要启用带有CrossOrigin批注或Java配置的CORS支持，它便应立即起作用.
I have a simple project based on @RestController and AngularJS. I can send GET requests from Angular to @RestController but i could not send POST request. I have an error in browser console:
XMLHttpRequest cannot load http://localhost:8080/add. Request header field Content-Type is not allowed by Access-Control-Allow-Headers.
My @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!");
}
}
Here is my CORS filter:
@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() {}
}
My AngularJS controller:
function addController($scope, $http){
$scope.url = 'http://localhost:8080/add';
$scope.addPhrase = function(){
$http.post($scope.url, {"data": $scope.value});
}
}
And 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>
I tried to solve this problem with header: "Content-Type": "application/json" but it gave me Bad request error.
You could also consider using the native CORS support available in the upcoming Spring Framework 4.2 release. See this blog post for more details.
By default, it is configured to automatically accept all the headers, so it should work as soon as you enable CORS support with CrossOrigin annotation or with Java config.
这篇关于Angular，CORS和Spring的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
