使用带有 angular.js 问题的 Java Spring REST 服务

Question

我有一个与 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(":-(");
            })
    }
}])

Answer 1

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

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

如果您只想在本地计算机上运行，​​最简单的方法是禁用浏览器中的安全性（对于 Chrome：Disable same origin policy in Chrome）。

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

编辑： 如果您使用的是 Tomcat 7（或更高版本），您可以尝试将以下 sn-p 添加到您的 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 服务器的主机和端口。

Answer 2

这是因为您在不同的主机而不是本地主机上启动 Web 客户端。试试你的外部 IP，看看能得到什么。