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


Posted in Javascript onSeptember 19, 2017

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注解即是给响应头增加了这两个参数解决跨域问题。

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

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

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

报错如下:

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

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类型不匹配,故报错。

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

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注解方式。推荐使用注解,方便。

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

Javascript 相关文章推荐
jQuery应用之jQuery链用法实例
Jan 19 Javascript
Javascript实现多彩雪花从天降散落效果的方法
Feb 02 Javascript
基于javascript html5实现3D翻书特效
Mar 14 Javascript
jquery实现一个简单的表单验证实例
Mar 30 Javascript
Ionic如何创建APP项目
Jun 03 Javascript
jQuery validate插件功能与用法详解
Dec 15 Javascript
新闻上下滚动jquery 超简洁(必看篇)
Jan 21 Javascript
AngularJS双向绑定和依赖反转实例详解
Apr 15 Javascript
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
基于Vue实现拖拽效果
Apr 27 Javascript
让你5分钟掌握9个JavaScript小技巧
Jun 09 Javascript
vue动态设置页面title的方法实例
Aug 23 Javascript
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 #jQuery
jQuery选择器之表单元素选择器详解
Sep 19 #jQuery
JS实现静态页面搜索并高亮显示功能完整示例
Sep 19 #Javascript
原生javascript实现的全屏滚动功能示例
Sep 19 #Javascript
Vue结合SignalR实现前后端实时消息同步
Sep 19 #Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
Sep 19 #Javascript
vue实现页面加载动画效果
Sep 19 #Javascript
You might like
PHP 多维数组排序(usort,uasort)
2010/06/30 PHP
PHP中的cookie不用刷新就生效的方法
2012/02/04 PHP
php插入排序法实现数组排序实例
2015/02/16 PHP
CodeIgniter实现从网站抓取图片并自动下载到文件夹里的方法
2015/06/17 PHP
PHP多进程编程之僵尸进程问题的理解
2017/10/15 PHP
php微信支付之公众号支付功能
2018/05/30 PHP
PHP 模拟登陆功能实例详解
2019/09/10 PHP
PHP实现的AES 128位加密算法示例
2019/09/16 PHP
用 JavaScript 迁移目录
2006/12/18 Javascript
js form action动态修改方法
2008/11/04 Javascript
Javascript 兼容firefox的一些问题
2009/05/21 Javascript
精心挑选的15个jQuery下拉菜单制作教程
2012/06/15 Javascript
jQuery 事件的命名空间简单了解
2013/11/22 Javascript
Javascript获取当前日期的农历日期代码
2014/10/08 Javascript
详细讲解JavaScript中的this绑定
2016/10/10 Javascript
详解Webpack DLL用法以及功能
2017/07/11 Javascript
浅谈vue的踩坑路
2017/08/31 Javascript
javascript自定义事件功能与用法实例分析
2017/11/08 Javascript
JavaScript事件发布/订阅模式原理与用法分析
2018/08/21 Javascript
[35:27]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第二场 10.29
2020/10/29 DOTA
Python-基础-入门 简介
2014/08/09 Python
python通过函数属性实现全局变量的方法
2015/05/16 Python
Python中列表list以及list与数组array的相互转换实现方法
2017/09/22 Python
python实现名片管理系统
2018/11/29 Python
python GUI框架pyqt5 对图片进行流式布局的方法(瀑布流flowlayout)
2020/03/12 Python
查看已安装tensorflow版本的方法示例
2020/04/19 Python
GUESS盖尔斯法国官网:美国时尚品牌
2016/09/23 全球购物
Reformation官网:美国女装品牌
2018/09/14 全球购物
应届生求职推荐信
2013/10/28 职场文书
中专毕业生自我鉴定
2013/11/21 职场文书
毕业生自我鉴定范文
2019/05/13 职场文书
实习报告怎么写
2019/06/20 职场文书
PHP新手指南
2021/04/01 PHP
Vue实现下拉加载更多
2021/05/09 Vue.js
Spring中的使用@Async异步调用方法
2021/11/01 Java/Android
解决MySQL报“too many connections“错误
2022/04/19 MySQL