使用angular.js问题的JavaSpringREST服务

Consuming Java Spring REST service with angular.js issue

本文关键字：JavaSpringREST 服务 问题 angular js 使用      更新时间：2023-09-26

我有一个与CORS有关的问题。我正在使用angular和Spring编写客户端-服务器应用程序。当我想发送一些HTTP请求时，浏览器显示有一个"跨来源请求被阻止：同源策略不允许读取远程资源http://localhost:8080/..."错误。我已经使用Tomcat在localhost上部署了REST，现在我尝试使用angular使用任何响应，使用"npm"服务器部署，但由于CORS问题，我无法做到这一点。我做错了什么？下面是代码段：

服务器端：

@RequestMapping(value="/dummy", consumes="application/json", method=RequestMethod.GET)
public @ResponseBody String dummy() {
    return "LOL";
}

客户端：

var authorizationApp = angular.module("authorizationApp", ['PageController','ngRoute']);
authorizationApp.config(function($httpProvider) {
  $httpProvider.defaults.useXDomain = true;

  delete $httpProvider.defaults.headers.common['X-Requested-With'];
});
authorizationApp.config(['$routeProvider', function($routeProvider) {
    .....
}])
var pageController = angular.module('PageController',[])
pageController.controller('PageCtrl',['$scope', '$routeParams', '$location', '$http', function($scope, $routeParams, $location, $http) {
    ..................................
    $scope.someFunc = function() {
        $http.get("http://localhost:8080/rabota/student/dummy")
            .success(function(data, status,headers,config) {
                alert("sent");
            })
            .error(function(data, status,headers,config) {
                alert(":-(");
            })
    }
}])

默认情况下，浏览器不允许AJAX请求到不同的域（或具有不同端口的同一域）。有很多方法可以解决这个问题：

  • 通过托管前端的服务器向后端代理请求
  • 将Access-Control-Allow-Origin标头添加到后端的响应
  • 将前端和后端托管在同一服务器上
  • 在浏览器中禁用同源策略

如果你只想在本地机器上运行，最简单的方法是禁用浏览器中的安全性（对于Chrome：禁用Chrome中的同源策略）。

如果你想了解更多详细信息，我建议你阅读这篇文章：https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

编辑：如果您使用Tomcat7（或更高版本），您可以尝试将以下代码段添加到web.xml文件中

<filter>
  <filter-name>CorsFilter</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
  <init-param>
    <param-name>cors.allowed.origins</param-name>
    <param-value>http://HOST:PORT</param-value>
  </init-param>
</filter>
<filter-mapping>
  <filter-name>CorsFilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>

其中HOST和PORT是npm服务器的主机和端口。

这是因为您在不同的主机而不是本地主机上启动web客户端。试试你的外部IP，看看它能给你带来什么。

相关文章：