跨域的两种解决方法jsonp和CORS
1、跨域
什么是跨域?
当你请求的url是不同源的数据的时候,浏览器一般会抛出请求跨域的错误,如下图:
造成跨域的原因?
即你违反了浏览器的同源策略的限制=>阻止一个域的js脚本和另外一个域的内容进行交互;
所谓的'同源策略':
指在两个页面具有相同的协议,域名和端口号;
url格式:https://www.cnblogs.com:8080/Zxq-zn/p/12327985.html
协议:'http:',有http,https,ftp等;
域名:www.cnblogs.com,可用ip地址表示;
端口:':8080'跟在域名的后面,省略的话采用默认的端口号;
虚拟目录:从域名后面第一个'/'到最后一个'/'位置
文件名:'12327985.html'
2、jsonp方式解决跨域
原理:网页通过添加一个<script>元素,利用script标签请求非同源的资源,向服务器请求 JSON 数据,服务器收到请求后,将数据放在一个指定名字的回调函数的参数位置传回来。
缺点:只支持get请求
java接口控制器:
// @CrossOrigin
@GetMapping(value = "/api/blogs")
@ResponseBody
public JSONPObject list(HttpServletRequest request, HttpServletResponse response, @RequestParam String callback) throws Exception {
ModelAndView model = new ModelAndView();
List<Blog> data = blogService.findAll();
model.addObject("data",data);
return new JSONPObject(callback,model);
}
原生js实现:
<script>
function dosomething(res) {
console.log('get');
console.log(res);
}
</script>
<script src="http://localhost:8088/api/blogs?callback=dosomething"></script>
jq实现:
<script>
$.ajax({
url: 'http://localhost:8088/api/blogs',
type: 'get',
dataType: 'jsonp',
jsonp: "callback",
success: function(data) {
console.log(data);
},
error: function(data) {
console.log('失败了!');
}
});
</script>
3、CORS方式
简介:CORS 是跨域资源分享(Cross-Origin Resource Sharing)的缩写。它是 W3C 标准,属于跨源 AJAX 请求的解决方法。
CORS实现原理:
普通CROS请求:在服务器端设置Access-Control-Allow-Origin:*=>代表接受任意域名的请求
如图:
java后台:
@CrossOrigin
@GetMapping(value = "/api/blogs")
@ResponseBody
public List<Blog> list(HttpServletRequest request, HttpServletResponse response) throws Exception {
List<Blog> data = blogService.findAll();
return data;
}
带cookies的CROS请求:
jq设置:
$.ajax({
url: 'http://localhost:8088/api/blogs',
type: 'get',
xhrFields: {
withCredentials: true //请求携带cookies
},
success: function(data) {
console.log(data);
},
error: function(data) {
console.log('失败了!');
}
});
浏览器报错:即后台的 Access-Control-Allow-Origin:不能设置为*,要设置为具体的url;且要在后台设置接受cookies,即设置后台的Access-Control-Allow-Credentials
修改后的java后台为:
//@CrossOrigin(origins="http://localhost:8080")//允许访问的域
@GetMapping(value = "/api/blogs")
@ResponseBody
public List<Blog> list(HttpServletRequest request, HttpServletResponse response) throws Exception {
response.setHeader("Access-Control-Allow-Origin", "http://localhost:8080");//设置接受具体的url
response.setHeader("Access-Control-Allow-Credentials", "true");/设置接受cookies
List<Blog> data = blogService.findAll();
return data;
}
axios代码:
this.$axios.defaults.withCredentials = true;//设置cookies
this.$axios.get('http://localhost:8088/api/blogs')
.then(response => {
console.log(response);
})
请求如图:
跨域的两种解决方法jsonp和CORS的更多相关文章
- 跨域的小小总结:js跨域及跨域的几种解决方法
一.什么是跨域?? js跨域请求就是使用js访问iframe里的不同域名下的页面内容,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同的域的iframe框架中的数据.即只要域名.协议. ...
- IOS-43-导航栏标题navigationItem.title不能改变颜色的两种解决方法
IOS-43-导航栏标题navigationItem.title不能改变颜色的两种解决方法 IOS-43-导航栏标题navigationItem.title不能改变颜色的两种解决方法 两种方法只是形式 ...
- win7系统不能用telnet命令的两种解决方法
电脑专业人员对telnet命令都不陌生了,Telnet当成一种通信协议,在日常工作中,经常面对网络问题的人都会用到telnet命令,因为简单有效,可以帮助更快的找出问题.要是在使用过程中碰到win7纯 ...
- JavaScript监听手机物理返回键的两种解决方法
JavaScript没有监听物理返回键的API,所以只能使用 popstate 事件监听. 有两个解决办法: 1.返回到指定的页面 pushHistory(); window.addEventList ...
- 64位win10系统无法安装.Net framework3.5的两种解决方法
参考网站: https://blog.csdn.net/zang141588761/article/details/52177290 在Windows10中,当我们安装某些软件的时候会提示“你的电脑上 ...
- 64位win10系统无法安装.Net framework3.5的两种解决方法【转】
近日有网友反映在windows10_64位系统电脑上安装Net framework3.5,操作时总失败,怎么办呢?小编下面就介绍win10 64位系统无法安装Net framework3.5的两种解决 ...
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...
- canvas.toDataURL 由于跨域报错的解决方法
关于canvas.toDataURL 由于跨域报错的解决方法 用过canvas,都知道toDataURL这个方法真好用,不仅合成图片用到它,压缩图片也用到它.但有一个问题,就是图片源不能跨域,不然会报 ...
- 电脑出现kernelbase.dll错误的两种解决方法
KernelBase.dll是Windows操作系统的重要文件,它为各种应用程序提供服务.如果电脑提示kernelbase.dll错误,这该怎么处理?大家可以用电脑自带的防火墙或者是第三方软件来进行故 ...
随机推荐
- JVM系列七(JIT 即时编译器).
一.概述 即时编译器(Just In Time Compiler),也称为 JIT 编译器,它的主要工作是把热点代码编译成与本地平台相关的机器码,并进行各种层次的优化,从而提高代码执行的效率. 那么什 ...
- git 工作中实用 多人协同开发
多人协同开发 .克隆分支 git clone -b dev1. url .创建并关联远程分支 git checkout -b dev_wt origin/dev_wt 情况一获取其它分支的代码,并合并 ...
- [bzoj4873] [洛谷P3749] [Shoi2017] 寿司餐厅
Description Kiana最近喜欢到一家非常美味的寿司餐厅用餐.每天晚上,这家餐厅都会按顺序提供n种寿司,第i种寿司有一个 代号ai和美味度di,i,不同种类的寿司有可能使用相同的代号.每种寿 ...
- 解决python爬虫requests.exceptions.SSLError: HTTPSConnectionPool(host='XXX', port=443)问题
爬虫时报错如下: requests.exceptions.SSLError: HTTPSConnectionPool(host='某某某网站', port=443): Max retries exce ...
- Error connecting to the Service Control Manager: 拒绝访问 Mongodb问题-解决
原文地址:https://blog.csdn.net/carrot5032/article/details/74742888 发现在mongodb.log里出现 2017-07-07T17:01:5 ...
- SpringCloud与微服务Ⅶ --- Feign负载均衡
官方文档:https://projects.spring.io/spring-cloud/spring-cloud.html#spring-cloud-feign 一.Feign是什么 Feign是一 ...
- Spring-data-Jpa项目搭建
传送门:Spring Data 学习 Spring Data 开发环境搭建 Spring-data-jpa详解 简介 Spring Data是什么 Spring Data是一个用于简化数 ...
- 虚拟机ubuntu系统怎么添加 VMware tools
首先弹出光盘 然后安装 点击安装VMware tools 然后进入光盘 打开VMware tools 文件夹 将解压文件拉到桌面上 打开桌面上的文件夹 不选中文件 然后键入下面的内容 输入密码 输入y ...
- centos7 手动设置时间
date -s "2020-02-03 23:13:00" hwclock -w clock -w
- 【转】spring framework 5以前体系结构及内部各模块jar之间的maven依赖关系
作者:凌承一 出处:http://www.cnblogs.com/ywlaker/ 很多人都在用spring开发java项目,但是配置maven依赖的时候并不能明确要配置哪些spring的jar, ...