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.
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
