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 相关文章推荐
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
Nov 16 Javascript
JavaScript去掉空格的方法集合
Dec 28 Javascript
JavaScript中数组的排序、乱序和搜索实现代码
Nov 30 Javascript
JavaScript打开word文档的实现代码(c#)
Apr 16 Javascript
javascript轻量级模板引擎juicer使用指南
Jun 22 Javascript
js实现单击图片放大图片的方法
Feb 17 Javascript
详解JavaScript编程中正则表达式的使用
Oct 25 Javascript
JavaScript遍历求解数独问题的主要思路小结
Jun 12 Javascript
利用js获取下拉框中所选的值
Dec 01 Javascript
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
Feb 26 Javascript
React Native使用fetch实现图片上传的示例代码
Mar 07 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
Sep 04 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的access操作类
2008/04/09 PHP
浅析PHP原理之变量分离/引用(Variables Separation)
2013/08/09 PHP
php强制更新图片缓存的方法
2015/02/11 PHP
微信公众平台之快递查询功能用法实例
2015/04/14 PHP
使用JavaScript创建新样式表和新样式规则
2016/06/14 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
PHP的PDO事务与自动提交
2019/01/24 PHP
用roll.js实现的图片自动滚动+鼠标触动的特效
2007/03/18 Javascript
javascript对象的property和prototype是这样一种关系
2007/03/24 Javascript
js 屏蔽鼠标右键脚本附破解方法
2009/12/03 Javascript
鼠标右击事件代码(asp.net后台)
2011/01/27 Javascript
关于jQuery参考实例2.0 用jQuery选择元素
2013/04/07 Javascript
jQuery中prop()方法用法实例
2015/01/05 Javascript
Javascript复制实例详解
2016/01/28 Javascript
总结AngularJS开发者最常犯的十个错误
2016/08/31 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
2016/11/01 Javascript
Javascript 闭包详解及实例代码
2016/11/30 Javascript
JS实现的随机排序功能算法示例
2017/06/09 Javascript
bootstrapvalidator之API学习教程
2017/06/29 Javascript
VUE axios发送跨域请求需要注意的问题
2017/07/06 Javascript
浅谈JS和jQuery的区别
2019/03/27 jQuery
微信小程序实现音乐播放页面布局
2020/12/11 Javascript
Python中使用Beautiful Soup库的超详细教程
2015/04/30 Python
Python使用metaclass实现Singleton模式的方法
2015/05/05 Python
python统计文本字符串里单词出现频率的方法
2015/05/26 Python
python爬虫爬取网页表格数据
2018/03/07 Python
Python模拟简单电梯调度算法示例
2018/08/20 Python
python查找重复图片并删除(图片去重)
2019/07/16 Python
python实现邮件循环自动发件功能
2020/09/11 Python
Python 实现进度条的六种方式
2021/01/06 Python
美国美发品牌:Bumble and Bumble
2016/10/08 全球购物
网络艺术零售业的先驱者:artrepublic
2017/09/26 全球购物
迪拜领先运动补剂零售品牌中文站:Sporter商城
2019/08/20 全球购物
在DELPHI中调用存储过程和使用内嵌SQL哪种方式更好
2016/11/22 面试题
2015年煤矿安全工作总结
2015/05/23 职场文书
教师远程研修感悟
2015/11/18 职场文书