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入门问答 整理的几个常见的初学者问题
Feb 22 Javascript
document.getElementById的简写方式(获取id对象的简略写法)
Sep 10 Javascript
AngularJs 弹出模态框(model)
Apr 07 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
Sep 27 Javascript
require、backbone等重构手机图片查看器
Nov 17 Javascript
移动端刮刮乐的实现方式(js+HTML5)
Mar 23 Javascript
react router 4.0以上的路由应用详解
Sep 21 Javascript
实现div滚动条默认最底部以及默认最右边的示例代码
Nov 15 Javascript
在vue 中使用 less的教程详解
Sep 26 Javascript
vue-cli 3 全局过滤器的实例代码详解
Jun 03 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
Sep 26 Javascript
使用layui前端框架弹出form表单以及提交的示例
Oct 25 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 数据库字段复用的基本原理与示例
2011/07/22 PHP
PHP判断图片格式的七种方法小结
2013/06/03 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
Thinkphp5+uploadify实现的文件上传功能示例
2018/05/26 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
[推荐]javascript 面向对象技术基础教程
2009/03/03 Javascript
23个Javascript弹出窗口特效整理
2011/02/25 Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
2013/07/18 Javascript
jQuery父级以及同级元素查找介绍
2013/09/04 Javascript
原生的html元素选择器类似jquery选择器
2014/10/15 Javascript
CSS3,HTML5和jQuery搜索框集锦
2014/12/02 Javascript
javascript+canvas制作九宫格小程序
2014/12/28 Javascript
Javascript中replace()小结
2015/09/30 Javascript
Angular中点击li标签实现更改颜色的核心代码
2017/12/08 Javascript
vue-cli+webpack项目 修改项目名称的方法
2018/02/28 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
2018/09/26 Javascript
jQuery实现的点击图片居中放大缩小功能示例
2019/01/16 jQuery
vue表单中遍历表单操作按钮的显示隐藏示例
2019/10/30 Javascript
Python实现冒泡,插入,选择排序简单实例
2014/08/18 Python
Python解决抛小球问题 求小球下落经历的距离之和示例
2018/02/01 Python
Pycharm导入Python包,模块的图文教程
2018/06/13 Python
python多任务及返回值的处理方法
2019/01/22 Python
django 中QuerySet特性功能详解
2019/07/25 Python
Windows10+anacond+GPU+pytorch安装详细过程
2020/03/24 Python
python导入库的具体方法
2020/06/18 Python
使用css3和jquery实现可伸缩搜索框
2014/02/12 HTML / CSS
NFL欧洲商店(德国):NFL Europe Shop DE
2018/11/03 全球购物
工程总经理工作职责
2013/12/09 职场文书
人事文员岗位职责
2015/02/04 职场文书
聘任证明怎么写
2015/03/02 职场文书
建筑工程催款函
2015/06/24 职场文书
学校2016年圣诞节活动总结
2016/03/31 职场文书
ORACLE查看当前账号的相关信息
2021/06/18 Oracle
Python matplotlib绘制条形统计图 处理多个实验多组观测值
2022/04/21 Python
Win10此设备不支持接收Miracast无法投影的解决方法
2022/07/07 数码科技
MySQL 原理与优化之Limit 查询优化
2022/08/14 MySQL