Angular客户端请求Rest服务跨域问题的解决方法

 更新时间:2017年09月19日 14:15:58   作者:sean  
本篇文章主要介绍了Angular客户端请求Rest服务跨域问题的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

1.问题描述:通过Origin是http://localhost:4200请求http://localhost:8081的服务,控制台报错如下,但是Response为200。客户端和服务端IP相同,但是端口不同,存在跨域问题。

复制代码 代码如下:

XMLHttpRequest cannot load http://localhost:8081/api/v1/staffs. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.

2.解决方法:在服务端/api/v1/staffs的Restful方法增加@CrossOrigin注解,比如:

@CrossOrigin(origins = "*", maxAge = 3600)
@RequestMapping(value = "/api/v1/staffs", produces = { "application/json" }, method = RequestMethod.GET)
RestResponseList<?> queryStaffs(@RequestParam(value = "limit", required = false, defaultValue = "20") int limit,
 @RequestParam(value = "offset", required = false, defaultValue = "0") int offset);

3.重新发送请求http://localhost:8081/api/v1/...,请求成功。且响应头增加了Access-Control-Allow-Credentials和Access-Control-Allow-Origin参数。@CrossOrigin注解即是给响应头增加了这两个参数解决跨域问题。

4.在服务端POST方法同样使用注解@CrossOrigin解决跨域问题。

@CrossOrigin(origins = "*", maxAge = 3600)
@RequestMapping(value = "/api/v1/staffs", produces = { "application/json" }, method = RequestMethod.POST)
RestResponse<?> createStaff(@RequestBody RestRequest<StaffReqInfo> request);

报错如下:

5.查看响应码415,错误原因:

"status": 415,
"error": "Unsupported Media Type",
"exception": "org.springframework.web.HttpMediaTypeNotSupportedException",
"message": "Content type 'text/plain;charset=UTF-8' not supported"

6.进一步查看请求头信息,content-type为text/plain。与Response Headers的Content-Type:application/json;charset=UTF-8类型不匹配,故报错。

7.指定请求头content-type为application/json,比如在Angular中增加Headers。发送Post请求,请求成功。

let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers });

return this.http.post(this.staffCreateURL, body, options).map((response: Response) => {
 //return this.http.get(this.userLoginURL).map((response:Response)=> {
 let responseInfo = response.json();
 console.log("====请求staffCreateURL成功并返回数据start===");
 console.log(responseInfo);
 console.log("====请求staffCreateURL成功并返回数据end===");
 let staffName = responseInfo.responseInfo.staffName;
 console.log(staffName);
 return responseInfo;
})

另:也可以在HttpServletResponse对象通过setHeader("Access-Control-Allow-Origin", "*")方法增加响应头参数,解决跨域问题,即是@CrossOrigin注解方式。推荐使用注解,方便。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • AngularJS 购物车全选/取消全选功能的实现方法

    AngularJS 购物车全选/取消全选功能的实现方法

    下面小编就为大家带来一篇AngularJS 购物车全选/取消全选功能的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • Angularjs整合微信UI(weui)

    Angularjs整合微信UI(weui)

    本文给大家推荐的是使用angularjs实现整合微信新推出的UI(weui)的全部过程,有相同需求的小伙伴可以参考下
    2016-03-03
  • 详解AngularJS 路由 resolve用法

    详解AngularJS 路由 resolve用法

    本篇文章主要介绍了AngularJS 路由 resolve用法,详细的介绍了resolve用法,想要了解resolve用法的朋友可以了解一下
    2017-04-04
  • AngularJS入门教程之MVC架构实例分析

    AngularJS入门教程之MVC架构实例分析

    这篇文章主要介绍了AngularJS的MVC架构,结合实例形式重点分析了ng-controller声明并使用控制器的操作技巧与控制器作用域的相关注意事项,需要的朋友可以参考下
    2016-11-11
  • 详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0

    详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0

    本篇文章主要介绍了详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0,具有一定的参考价值,有兴趣的可以了解一下
    2017-05-05
  • AngularJS 使用$sce控制代码安全检查

    AngularJS 使用$sce控制代码安全检查

    SCE,即strict contextual escaping,我的理解是 严格的上下文隔离 ...翻译的可能不准确,但是通过字面理解,应该是angularjs严格的控制上下文访问,通过本文给大家介绍AngularJS 使用$sce控制代码安全检查,对angularjs sce相关知识感兴趣的朋友一起学习吧
    2016-01-01
  • AngularJS入门教程之过滤器详解

    AngularJS入门教程之过滤器详解

    本文主要讲解AngularJS 过滤器,这里整理了过滤器的相关资料并附示例代码,帮助大家学习AngularJS的知识,有需要的小伙伴可以参考下
    2016-08-08
  • angular8和ngrx8结合使用的步骤介绍

    angular8和ngrx8结合使用的步骤介绍

    这篇文章主要给大家介绍了关于angular8和ngrx8结合使用的详细步骤,文中通过示例代码介绍的非常详细,对大家学习或者使用angular8具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-12-12
  • AngularJS 文件上传控件 ng-file-upload详解

    AngularJS 文件上传控件 ng-file-upload详解

    这篇文章主要介绍了AngularJS 文件上传控件 ng-file-upload详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-01-01
  • 详解AngularJS2 Http服务

    详解AngularJS2 Http服务

    本篇文章主要介绍了详解AngularJS2 Http服务,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06

最新评论