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 相关文章推荐
Dojo之路:如何利用Dojo实现Drag and Drop效果
Apr 10 Javascript
Js获取下拉框选定项的值和文本的实现代码
Feb 26 Javascript
jquery Validation表单验证使用详解
Sep 12 Javascript
jquery性能优化高级技巧
Aug 24 Javascript
jQuery中判断对象是否存在的方法汇总
Feb 24 Javascript
深入理解Javascript中的自执行匿名函数
Jun 03 Javascript
AngularJS实现使用路由切换视图的方法
Jan 24 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
Feb 18 Javascript
使用Xcache缓存器加速PHP网站的配置方法
Apr 22 Javascript
使用socket.io制做简易WEB聊天室
Jan 02 Javascript
JS实现选项卡效果的代码实例
May 20 Javascript
vue使用websocket的方法实例分析
Jun 22 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抓取页面与代码解析 推荐
2010/07/23 PHP
PHP多例模式介绍
2013/06/24 PHP
PHP自动生成后台导航网址的最佳方法
2013/08/27 PHP
phpstorm 正则匹配删除空行、注释行(替换注释行为空行)
2018/01/21 PHP
实例讲解php实现多线程
2019/01/27 PHP
jQuery 性能优化手册 推荐
2010/02/23 Javascript
JS正则中的RegExp对象对象
2012/11/07 Javascript
JS的get和set使用示例
2014/02/20 Javascript
异步安全加载javascript文件的方法
2015/07/21 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
2015/09/14 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
2015/10/25 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
2016/05/31 Javascript
javascript实现瀑布流动态加载图片原理
2016/08/12 Javascript
xmlplus组件设计系列之树(Tree)(9)
2017/05/02 Javascript
zTree树形插件异步加载方法详解
2017/06/14 Javascript
微信小程序实现鼠标拖动效果示例
2017/12/01 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
2020/04/10 Javascript
ES6函数实现排它两种写法解析
2020/05/13 Javascript
微信小程序实现左滑删除效果
2020/11/18 Javascript
在漏洞利用Python代码真的很爽
2007/08/26 Python
浅谈python中的数字类型与处理工具
2017/08/02 Python
Python SQLite3数据库日期与时间常见函数用法分析
2017/08/14 Python
Python实现简易Web爬虫详解
2018/01/03 Python
Python一个简单的通信程序(客户端 服务器)
2019/03/06 Python
Python object类中的特殊方法代码讲解
2020/03/06 Python
Python sorted排序方法如何实现
2020/03/31 Python
Python使用eval函数执行动态标表达式过程详解
2020/10/17 Python
python实现登录与注册系统
2020/11/30 Python
基于Python-turtle库绘制路飞的草帽骷髅旗、美国队长的盾牌、高达的源码
2021/02/18 Python
CSS3过渡transition效果实例介绍
2016/05/03 HTML / CSS
Cocopanda波兰:购买化妆品、护肤品、护发和香水
2020/05/25 全球购物
荷叶圆圆教学反思
2014/02/01 职场文书
天网工程实施方案
2014/03/26 职场文书
企业安全生产目标责任书
2014/07/23 职场文书
公司向个人借款协议书范本
2014/10/09 职场文书
2019同学聚会主持词
2019/05/06 职场文书