Angularjs 角度、CORS和弹簧的问题_Angularjs_Spring_Post_Cors

Angularjs 角度、CORS和弹簧的问题

angularjs spring post cors

Angularjs 角度、CORS和弹簧的问题,angularjs,spring,post,cors,Angularjs,Spring,Post,Cors,我有一个基于@RestController和AngularJS的简单项目。我可以从Angular向@RestController发送GET请求，但无法发送POST请求。我在浏览器控制台中出错：无法加载XMLHttpRequest。访问控制允许标头不允许请求标头字段内容类型我的@RestController: @RestController public class AngularController { //@Autowired // PhraseService phrase

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

无法加载XMLHttpRequest。访问控制允许标头不允许请求标头字段内容类型

我的@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!");
    }
}

function addController($scope, $http){
    $scope.url = 'http://localhost:8080/add';
    $scope.addPhrase = function(){
        $http.post($scope.url, {"data": $scope.value});
    }
}

这是我的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控制器：

@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!");
    }
}

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”来解决这个问题，但它给了我错误的请求错误。

您需要在

访问控制允许标题中添加额外的选项。

以下是通常使用的选项：

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

您需要在

访问控制允许标题中添加其他选项

以下是通常使用的选项：

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

您还可以考虑使用即将发布的本机CORS支持。有关更多详细信息，请参阅

默认情况下，它被配置为自动接受所有的头文件，因此，一旦启用了CORS支持，就可以使用“代码> > SCORSORIGIN < /COD>注释或java配置文件.

< P>您还可以考虑使用即将发布的本机CORS支持。有关更多详细信息，请参阅

默认情况下，它被配置为自动接受所有标题，因此只要您使用

CrossOrigin

注释或Java config启用CORS支持，它就应该可以工作。

在Spring 4.2及更高版本中，对CORS的一流支持是现成的。详情可在此网页上找到

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

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

在上面的代码中，localhost:3000表示Angular应用程序URL。

在Spring 4.2和更高版本中，对CORS提供了一流的开箱即用支持。详情可在此网页上找到

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

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

在上面的代码中，localhost:3000表示Angular应用程序URL。

签出时，您可能需要将

“内容类型”

添加到

响应.setHeader（“访问控制允许标头”，“x请求的-with”）

行。签出时，您可能需要将

“内容类型”

添加到

响应.setHeader(“访问控制允许标头”、“x请求-带有”）

行。