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的更多相关文章

  1. 跨域的小小总结:js跨域及跨域的几种解决方法

    一.什么是跨域?? js跨域请求就是使用js访问iframe里的不同域名下的页面内容,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同的域的iframe框架中的数据.即只要域名.协议. ...

  2. IOS-43-导航栏标题navigationItem.title不能改变颜色的两种解决方法

    IOS-43-导航栏标题navigationItem.title不能改变颜色的两种解决方法 IOS-43-导航栏标题navigationItem.title不能改变颜色的两种解决方法 两种方法只是形式 ...

  3. win7系统不能用telnet命令的两种解决方法

    电脑专业人员对telnet命令都不陌生了,Telnet当成一种通信协议,在日常工作中,经常面对网络问题的人都会用到telnet命令,因为简单有效,可以帮助更快的找出问题.要是在使用过程中碰到win7纯 ...

  4. JavaScript监听手机物理返回键的两种解决方法

    JavaScript没有监听物理返回键的API,所以只能使用 popstate 事件监听. 有两个解决办法: 1.返回到指定的页面 pushHistory(); window.addEventList ...

  5. 64位win10系统无法安装.Net framework3.5的两种解决方法

    参考网站: https://blog.csdn.net/zang141588761/article/details/52177290 在Windows10中,当我们安装某些软件的时候会提示“你的电脑上 ...

  6. 64位win10系统无法安装.Net framework3.5的两种解决方法【转】

    近日有网友反映在windows10_64位系统电脑上安装Net framework3.5,操作时总失败,怎么办呢?小编下面就介绍win10 64位系统无法安装Net framework3.5的两种解决 ...

  7. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  8. canvas.toDataURL 由于跨域报错的解决方法

    关于canvas.toDataURL 由于跨域报错的解决方法 用过canvas,都知道toDataURL这个方法真好用,不仅合成图片用到它,压缩图片也用到它.但有一个问题,就是图片源不能跨域,不然会报 ...

  9. 电脑出现kernelbase.dll错误的两种解决方法

    KernelBase.dll是Windows操作系统的重要文件,它为各种应用程序提供服务.如果电脑提示kernelbase.dll错误,这该怎么处理?大家可以用电脑自带的防火墙或者是第三方软件来进行故 ...

随机推荐

  1. CVE-2019-0708远程桌面服务远程执行代码漏洞exp利用过程

    CVE-2019-0708远程桌面服务远程执行代码漏洞 上边这洞是啥我就不多说了,描述类的自行百度. 受影响系统版本范围: Windows Server 2008 R2 Windows Server ...

  2. 美团codem 数列互质 - 莫队

    题目描述 给出一个长度为 nnn 的数列 a1,a2,a3,...,an{ a_1 , a_2 , a_3 , ... , a_n }a​1​​,a​2​​,a​3​​,...,a​n​​,以及 mm ...

  3. kmp-最小子串回文次数

    poj 2406 Given two strings a and b we define a*b to be their concatenation. For example, if a = &quo ...

  4. python小功能记录

    本博客会不断完善,记录python小功能. 1. 合并两个字典 # in Python 3.5+ >>> x = {'a': 1, 'b': 2} >>> y = ...

  5. proxy应用场景

    //场景一:可以修改对象的值let o = { name: 'xiaoming', price: 190 } let d = new Proxy(o,{ get (target,key){ if(ke ...

  6. 如何高效实用 Git

    Git 工作流 只要项目是多人参与的,那么就需要使用正确的 Git 工作流程. 下面介绍一个简单有效的工作流程. 场景 假设有一个项目,要开发下一代的 Facebook,你就是这个项目的技术 lead ...

  7. python接口测试,mock模块基本使用介绍

    mock简介 py3已将mock集成到unittest库中 为的就是更好的进行单元测试 简单理解,模拟接口返回参数 通俗易懂,直接修改接口返回参数的值 mock作用 解决依赖问题,达到解耦作用 当我们 ...

  8. Dynamics CRM Package Deployer 部署工具

    CRM 部署工具非常有用 我们可以用部署工具来做迁移,部署 等等.  Package Deployer可以同时部署多个solutions. 并且也可以勾选solution的plugin也同时部署. 三 ...

  9. 宝塔面板管理阿里云服务器FTP不能用

    # 宝塔面板管理阿里云,ftp不能用 解决方法 搜ftp点击设置 然后Ctrl+F搜索ForcePassiveIP 注意2在默认情况下是带#号的,去掉#号,后面的ip地址是阿里云的公网ip 重启,再次 ...

  10. springIOC源码接口分析(十一):ConfigurableApplicationContext

    一 实现接口 关系图: ConfigurableApplicationContext接口实现了三个接口,ApplicationContext, Lifecycle, Closeable, Applic ...