복붙노트

[SPRING] Angular, CORS 및 Spring 문제

SPRING

Angular, CORS 및 Spring 문제

@RestController 및 AngularJS를 기반으로하는 간단한 프로젝트가 있습니다. Angular에서 @RestController로 GET 요청을 보낼 수 있지만 POST 요청을 보낼 수 없습니다. 브라우저 콘솔에 오류가 있습니다.

내 @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"하지만 나에게 잘못된 요청 오류가 발생했다.

해결법

  1. ==============================

    1.다가올 Spring Framework 4.2 릴리스에서 사용할 수있는 기본 CORS 지원을 사용할 수도 있습니다. 자세한 내용은이 블로그 게시물을 참조하십시오.

    다가올 Spring Framework 4.2 릴리스에서 사용할 수있는 기본 CORS 지원을 사용할 수도 있습니다. 자세한 내용은이 블로그 게시물을 참조하십시오.

    기본적으로 모든 헤더를 자동으로 수락하도록 구성되어 있으므로 CrossOrigin 주석 또는 Java 구성을 사용하여 CORS 지원을 사용하는 즉시 작동해야합니다.

  2. ==============================

    2.액세스 제어 허용 헤더에 옵션을 추가해야합니다.

    액세스 제어 허용 헤더에 옵션을 추가해야합니다.

    일반적으로 사용되는 옵션은 다음과 같습니다.

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

    3.Spring 4.2 및 그 이후의 릴리스에는 CORS를 즉시 사용할 수있는 첫 번째 지원이 있습니다. 자세한 내용은이 페이지에서 확인할 수 있습니다.

    Spring 4.2 및 그 이후의 릴리스에는 CORS를 즉시 사용할 수있는 첫 번째 지원이 있습니다. 자세한 내용은이 페이지에서 확인할 수 있습니다.

    RESTController로 주석 된 Spring 클래스에서 @CrossOrigin 주석을 사용할 수있다. 다음 코드는 동일한 것을 나타냅니다.

    @CrossOrigin (originins = "http : // localhost : 3000", maxAge = 3600) @RestController 공용 클래스 AngularController { }

    위의 코드에서 localhost : 3000은 Angular app URL을 나타냅니다.

  4. from https://stackoverflow.com/questions/28982907/problems-with-angular-cors-and-spring by cc-by-sa and MIT license