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插件集合推荐
Apr 19 Javascript
JS实现点击按钮后框架内载入不同网页的方法
May 05 Javascript
jquery解析json格式数据的方法(对象、字符串)
Nov 24 Javascript
Javascript技术栈中的四种依赖注入小结
Feb 27 Javascript
值得分享的轻量级Bootstrap Table表格插件
May 30 Javascript
微信小程序 Buffer缓冲区的详解
Jul 06 Javascript
基于JavaScript实现抽奖系统
Jan 16 Javascript
JavaScript中arguments和this对象用法分析
Aug 08 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
Apr 08 Javascript
p5.js实现动态图形临摹
Oct 23 Javascript
浅析JavaScript 函数防抖和节流
Jul 13 Javascript
JavaScript中跨域问题的深入理解
Mar 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
自己动手,丰衣足食 - 短波框形天线制作
2021/03/01 无线电
小文件php+SQLite存储方案
2010/09/04 PHP
destoon安装出现Internal Server Error的解决方法
2014/06/21 PHP
利用js实现在浏览器状态栏显示访问者在本页停留的时间
2013/12/29 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
2015/04/12 Javascript
JS模拟并美化的表单控件完整实例
2015/08/19 Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
2016/06/02 Javascript
BOM系列第一篇之定时器setTimeout和setInterval
2016/08/17 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
2016/10/05 Javascript
微信小程序 富文本转文本实例详解
2016/10/24 Javascript
微信小程序 wx.uploadFile无法上传解决办法
2016/12/14 Javascript
assert()函数用法总结(推荐)
2017/01/25 Javascript
浅谈Angular7 项目开发总结
2018/12/19 Javascript
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
2019/12/02 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
2020/02/11 Javascript
python uuid模块使用实例
2015/04/08 Python
详解Python3中的Sequence type的使用
2015/08/01 Python
Python下实现的RSA加密/解密及签名/验证功能示例
2017/07/17 Python
Python使用回溯法子集树模板获取最长公共子序列(LCS)的方法
2017/09/08 Python
python在线编译器的简单原理及简单实现代码
2018/02/02 Python
Flask框架通过Flask_login实现用户登录功能示例
2018/07/17 Python
深入理解Python异常处理的哲学
2019/02/01 Python
详解Python并发编程之创建多线程的几种方法
2019/08/23 Python
Python基础之高级变量类型实例详解
2020/01/03 Python
编译 pycaffe时报错:fatal error: numpy/arrayobject.h没有那个文件或目录
2020/11/29 Python
美国体育用品商店:Paragon Sports
2017/10/08 全球购物
Lyle & Scott苏格兰金鹰官网:英国皇室御用品牌
2018/05/09 全球购物
试解释COMMIT操作和ROLLBACK操作的语义
2014/07/25 面试题
业务员薪酬管理制度
2014/01/15 职场文书
大学同学聚会邀请函
2014/01/29 职场文书
学校开除通知书
2015/04/25 职场文书
四大名著读书笔记
2015/06/25 职场文书
《所见》教学反思
2016/02/23 职场文书
MySQL 重写查询语句的三种策略
2021/05/10 MySQL
golang fmt格式“占位符”的实例用法详解
2021/07/04 Golang
vue使用localStorage持久性存储实现评论列表
2022/04/14 Vue.js