使用 $http 的 Angularjs 休息调用不适用于 Spring RestController 休息 api答案

【问题标题】：Angularjs rest call using $http not working with Spring RestController rest apis使用 $http 的 Angularjs 休息调用不适用于 Spring RestController 休息 api
【发布时间】：2017-03-17 11:50:01
【问题描述】：

我有一个使用 SpringBoot 开发的弹簧RestController。

@RestController
@RequestMapping("/myRoot")
public class MyRestController {
  @Autowired
  private MyService myService;

  @RequestMapping(value="/add/{myItem}", method=RequestMethod.POST)
  public @ResponseBody void addMyItem(@PathVariable("myItem") String myItem){
        myService.addMyItem(myItem);
    }
}

我的 Spring Boot 类包含 main 方法是：

@SpringBootApplication(scanBasePackages={"org.mypackage"})
public class MyRestApp {
public static void main(String[] args) {
    SpringApplication.run(MyRestApp .class, args);
}
}

当我编译项目时，在 Eclipse 中将生成的 Jar 作为 Java 应用程序运行，控制台显示：

2017-03-17 22:33:14.363  INFO 2292 --- [           main] s.b.c.e.t.TomcatEmbeddedServletContainer : Tomcat started on port(s): 8080 (http)
2017-03-17 22:33:14.371  INFO 2292 --- [           main] o.n.todo.springboot.SuperrDuperrRestApp  : Started MyRestApp in 7.056 seconds (JVM running for 7.837)

在 Chrome 上的 Postman 上发帖调用 http://localhost:8080/MyRestApi/myRoot/add/myItem 会返回成功 (200 OK)。

这意味着我的 rest api 已正确公开并启动并运行。

我正在尝试从我的 AngularJs 1 应用程序中调用以上 URI，如下所示：

'use strict';

var myApp = angular.module("MyFirstAngularRestApp",[]);
myApp.controller("myCtrl",myCtrl);

function myCtrl($http){
  console.log("myCtrl");

  var REST_SERVICE_URI = 'http://localhost:8080/MyRestApi/';

  this.AddItem = function(newItem){
  console.log("AddItem");
  console.log(newItem);

  $http.post(this.REST_SERVICE_URI + 'myRoot/add/' + newItem).then(function(response){
        console.log("success");
    });
  }
 }

但是，这不起作用。我收到以下错误：

XMLHttpRequest cannot load file:///C:/myDevelopment/Angular/MyAngularApp/undefinedtoDo/add/ReadABook. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
Possibly unhandled rejection: {"data":null,"status":-1,"config":{"method":"POST","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":"callback","url":"undefinedtoDo/addItem/Read a Book","headers":{"Accept":"application/json, text/plain, */*"}},"statusText":""}

我对 AngularJs 1 完全陌生，所以无法理解为什么我的休息电话不起作用。我错过了什么？

我的 AngularJs 项目位于笔记本电脑驱动器上的不同位置，而我的 Eclipse 工作区位于不同的目录。但我认为这不应该是重要的。

如果有人可以指导我如何解决此错误，我将不胜感激。要求尽可能详细地回答，因为我是新手。

谢谢！

【问题讨论】：

标签： angularjs spring rest spring-boot

【解决方案1】：

这是一个跨域错误，尝试使用 @CrossOrigin 注释您的控制器，它将允许您的应用程序调用 API。使用注释，您可以指定域（来源）和方法（PUT、GET、POST 等）。查看更多：http://docs.spring.io/spring-framework/docs/4.2.4.RELEASE/javadoc-api/org/springframework/web/bind/annotation/CrossOrigin.html

如果要定义要允许的域，请在配置类中使用以下代码。在这种情况下，您不需要注释所有控制器：

@Bean
public WebMvcConfigurer corsConfigurer() {
    return new WebMvcConfigurerAdapter() {
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/**/*").allowedOrigins("locahost:8080");
        }
    };
}

【讨论】：

【解决方案2】：

您的 Angular 应用程序和服务器通常在不同的来源和浏览器上运行，由于 same-origin policy 不支持。

如果您想使用 @CrossOrigin 注释，您可以通过注释控制器或特定方法轻松解决此问题，如下所示：

@CrossOrigin(origins = "http://localhost:4200", methods = { RequestMethod.POST, RequestMethod.GET, RequestMethod.DELETE,
    RequestMethod.PUT })

如您所见，您可以指定主机或支持的 http 方法等。

【讨论】：