前端JS跨域解决方案
JS跨域请求
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同,都被当作是不同的域
跨域解决方案
- CORS方案
CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。
它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。整个CORS通信过程,都是浏览器自动完成,不需要用户参与。
CORS通信与同源的AJAX通信代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。
因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。
请求过程如下图:
Preflight Request:
然后服务器端给我们返回一个Preflight Response:
- Access-Control-Allow-Origin
Access-Control-Allow-Origin是HTML5中定义的一种解决资源跨域的策略。
他是通过服务器端返回带有Access-Control-Allow-Origin标识的Response header,用来解决资源的跨域权限问题。
使用方法:在response添加Access-Control-Allow-Origin,
例如Access-Control-Allow-Origin:www.google.com
也可以设置为 * 表示该资源谁都可以用
CORS请求默认不发送Cookie和HTTP认证信息。
如果要把Cookie发到服务器,一方面要服务器同意,指定Access-Control-Allow-Credentials字段。
另一方面,开发者必须在AJAX请求中打开withCredentials属性。否则,即使服务器同意发送Cookie,浏览器也不会发送。或者,服务器要求设置Cookie,浏览器也不会处理。
使用方法
- 1.先在需要跨域的工程接受请求
response.setHeader("Access-Control-Allow-Origin", "http://localhost:9106");
response.setHeader("Access-Control-Allow-Credentials", "true");
如果想要把Cookie发到服务器,需要在AJAX请求中打开开withCredentials属性。
springMVC的版本在4.2或以上版本,可以使用注解实现跨域, 在跨域的方法上添加注解@CrossOrigin即可
@CrossOrigin(origins="http://localhost:9106",allowCredentials="true")allowCredentials="true" 可以缺省
了解更多跨域解决方案
可以参考如下地址,讲解了很多方法。
了解更多
前端JS跨域解决方案相关推荐
- Atitit.js跨域解决方案attilax大总结 后台java php c#.net的CORS支持
Atitit.js跨域解决方案attilax大总结 后台java php c#.net的CORS支持 1.设置 document.domain为一致 推荐1 2.Apache 反向代理 推荐1 3. ...
- 前端常见跨域解决方案
前端常见跨域解决方案 参考文章: (1)前端常见跨域解决方案 (2)https://www.cnblogs.com/plBlog/p/11430457.html 备忘一下.
- 常见js跨域解决方案
以下为几种常见js跨域解决方案: ajax跨域请求 一.使用jsonp方式实现跨域请求 $.ajax({async: false, type:"POST",dataType: 'j ...
- js跨域解决方案php,详解js跨域原理以及2种解决方案_javascript技巧
1.什么是跨域 我们经常会在页面上使用ajax请求访问其他服务器的数据,此时,客户端会出现跨域问题. 跨域问题是由于javascript语言安全限制中的同源策略造成的. 简单来说,同源策略是指一段脚本 ...
- js跨域解决方案(一)
域名.端口只要有一个不同就会出现跨域的问题. 以下把域名端口不同的服务器统称为跨域服务器.代码用java语言解释. 我也是看别人博客才知道可以通过调用跨域服务器解决 因为js文件是可以跨域的,就像我们 ...
- 前端常见跨域问题解决方案
前端常见跨域解决方案(全) 什么是跨域? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的. 广义的跨域: 1.) 资源跳转: A链接.重定向.表单提交 2.) 资源嵌入: & ...
- node.js后端及Vue前端跨域解决方案
node.js后端及Vue前端跨域解决方案 从目前我了解的情况来看,前后端跨域使用的方式有很多种,这里记录我使用最顺手的一种,即在后端使用cors跨域 node.js后端跨域解决方案 先看后端的入口文 ...
- WEB 前端跨域解决方案
跨域定义 广义的定义:跨域是指一个域下的文档或脚本试图去请求另一个域下的资源. 1.) 资源跳转: 链接.重定向.表单提交 2.) 资源嵌入: <link>.<script>. ...
- 9种常见的前端跨域解决方案
9种常见的前端跨域解决方案(详解) 2019.09.02 21:54 73879浏览 一.什么是跨域? 在前端领域中,跨域是指浏览器允许向服务器发送跨域请求,从而克服Ajax只能同源使用的限制. ...
最新文章
- ALD技术,相机去噪,图像传感器
- linux安装 redis,在linux中安装redis
- linux usb 同步传输,从设备到主机的用户模式USB等时传输
- 保证服务4个9的可用性的核心思路
- List集合排序及去重
- RTE 2020 实时互联网大会参会指南——明天我们线上见!
- 【Day5.6】当地人的美食街
- linux服务器网卡极限速率,linux下简单限制网卡速度
- 【cqbzoj1526】 分梨子 乱搞(不是dp) 解题报告 c++
- 阿弥陀佛和他的极乐世界
- C语言----文件存储
- Win8调整笔记本亮度,数值有变化但无效果
- 【毕业设计】电商产品评论数据分析可视化(情感分析) - python 大数据
- 【元胞自动机】元胞自动机多车道信号交叉口仿真【含Matlab源码 818期】
- uni-app 解决软键盘弹起输入框遮盖问题
- 【ICPC模板】卡迈克尔函数
- 黑盒测试和白盒测试优点和缺点
- 【Hexo搭建个人博客】(十三)Next主题中添加首页文章置顶功能及置顶图标
- Virtual Box 安装Win10保姆式教程
- iOS 之 安装pods 项目配置 及删除项目中的pods
热门文章
- 外包公司“混”了2年,我只认真做了5件事,如今顺利拿到华为 Offer。
- “笨”企业遇到快时代:中兴曾学忠反思中兴
- MySQL(六) 保证主从一致
- win10任务管理器中查看进程句柄
- Iterator中的Itr类(ArrayList)
- android 设备关机后还能在设定的闹钟时刻响起的功能如何实现,Android闹钟 AlarmManager的使用...
- 算法工程师笔试面试问题汇总
- DDS中间件是什么?
- 谷歌浏览器查看HTTP请求头与响应头
- 腾讯文字识别API使用