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 相关文章推荐
百度留言本js 大家可以参考下
Oct 13 Javascript
js面向对象编程之如何实现方法重载
Jul 02 Javascript
javascript学习笔记(三)BOM和DOM详解
Sep 30 Javascript
js实现显示当前状态的导航效果代码
Aug 28 Javascript
vue router使用query和params传参的使用和区别
Nov 13 Javascript
vue2.0项目实现路由跳转的方法详解
Jun 21 Javascript
React Native基础入门之初步使用Flexbox布局
Jul 02 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
Aug 08 Javascript
使用express获取微信小程序二维码小记
May 21 Javascript
vant IndexBar实现的城市列表的示例代码
Nov 20 Javascript
继承行为在 ES5 与 ES6 中的区别详解
Dec 24 Javascript
详解JavaScript作用域、作用域链和闭包的用法
Sep 03 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
Thinkphp 框架扩展之应用模式实现方法分析
2020/04/27 PHP
Jquery Select操作方法集合脚本之家特别版
2010/05/17 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
2013/11/22 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
2014/02/26 Javascript
使用jquery动态加载js文件的方法
2014/12/24 Javascript
js计算德州扑克牌面值的方法
2015/03/04 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
2016/06/01 Javascript
浅谈js常用内置方法和对象
2016/09/24 Javascript
微信小程序 按钮滑动的实现方法
2017/09/27 Javascript
Vue从TodoList中学父子组件通信
2019/02/05 Javascript
vue-next/runtime-core 源码阅读指南详解
2019/10/25 Javascript
vue全局使用axios的操作
2020/09/08 Javascript
重命名批处理python脚本
2013/04/05 Python
Python urllib模块urlopen()与urlretrieve()详解
2013/11/01 Python
Python编写屏幕截图程序方法
2015/02/18 Python
Python设计模式之组合模式原理与用法实例分析
2019/01/11 Python
Python之lambda匿名函数及map和filter的用法
2019/03/05 Python
Python异常继承关系和自定义异常实现代码实例
2020/02/20 Python
通过实例解析Python return运行原理
2020/03/04 Python
django使用F方法更新一个对象多个对象字段的实现
2020/03/28 Python
Python try except异常捕获机制原理解析
2020/04/18 Python
django filter过滤器实现显示某个类型指定字段不同值方式
2020/07/16 Python
HTML5拖拉上传文件的简单实例
2017/01/11 HTML / CSS
纽约著名的服装辅料来源:M&J Trimming
2017/07/26 全球购物
函数指针的定义是什么
2016/08/14 面试题
初中政治教学反思
2014/01/17 职场文书
服务生自我鉴定
2014/01/22 职场文书
技校毕业生个人学习的自我评价
2014/02/21 职场文书
高中班级口号
2014/06/09 职场文书
会计学专业求职信
2014/07/17 职场文书
群众路线自查自纠工作情况报告
2014/10/28 职场文书
2016预备党员培训心得体会
2016/01/08 职场文书
python unittest单元测试的步骤分析
2021/08/02 Python
Java网络编程之UDP实现原理解析
2021/09/04 Java/Android
《杜鹃的婚约》OP主题曲「凸凹」无字幕影像公开
2022/04/08 日漫
Web应用开发TypeScript使用详解
2022/05/25 Javascript