什么是JS跨域访问 如何实现跨域访问
>什么是跨域?
A网站想要获取B网站服务器上的资源,网站通过AJAX发送请求的时候,本地服务器地址与请求地址、协议类型(http)、IP地址(域名)、端口,三者有其一不同都称之为跨域请求资源。
>为什么要有跨域限制?
通过上面的解释不难发现,跨域限制主要是出于对用户安全的考虑。
因为每一次的HTTP请求,都会附带该请求地址对应的cookie信息,那么就可以做以下攻击:
1、用户登录某银行网站A,该网站在用户电脑上设置cookie信息。
2、用户打开恶意网站B,该网站也向网站A发送AJAX请求,该请求会验证网站A对应的cookie信息,因为已经登录过一次。
3、银行验证到用户cookie无误,response响应用户数据,此时用户数据就泄露给网站B的服务器了。
有了跨域限制,上面的情况就可以得到控制,上网也就更加安全。
>如何实现跨域?
一般有下面两种最常用的方式。
CORS
cors是一个W3C制定的跨域标准,全称是:Cross-origin resource sharing,这句话的含义就是跨域资源共享,这种方式主要应用在服务端。
他是通过设置服务端设置一个HTTP头:setHeader("Access-Control-Allow-Origin", "*")
如果Access-Control-Allow-Origin中有A,或者是通配符*,浏览器就会允许A跨域,通配符代表任何地址都能跨域。
客户端不需要作任何设置,还是按照AJAX请求一样,这样就能获取跨域资源。
JSONP
jsonp是通过script标签的src属性,我们都知道src属性能获取同一个ip服务器上,不同文件夹的文件,它其实就是一个HTTP请求,而且它支持跨域,不需要服务端设置直接就能跨域获取资源。
实际操作:
1、先定义一个函数,通过参数来接收数据,后端用参数来设置回调。
<script type="text/javascript">
function toData(data){
console.log(data);
}
</script>
2、然后利用script标签发送一个请求,需要把回调函数的名字传到后端。
<script src="http://127.0.0.1:8080/user?callback=toData&name=Bill"></script>
3、服务器通过该接口,拿到回调函数的名字,把它拼接成一个回调函数,再通过字符串的方式传到前端。
if(url=="/user"){
response.end(`${GET.callback}(${json})`);
}
明白到上面的原理,你就知道为什么jsonp不能发送post请求了~,这也是跨域请求最常用的方式。
服务端代理
直接通过服务端发送HTTP请求,服务端没有跨域限制,因为跨域不同源限制只是针对浏览器,服务端请求到数据后再发送到客户端。
来源:微点阅读 https://www.weidianyuedu.com
什么是JS跨域访问 如何实现跨域访问相关推荐
- JS跨域访问(ajax跨域)
好吧,国庆有点不务正业,玩了几天游戏,咳咳 感觉还不错,放松下,本来是打算学angular2的,国庆的时候刚好也看到vue2的正式版本发布,恩,最后都没看.. 正言 为什么会出现跨域? 跨域的产生是因 ...
- js中几种实用的跨域方法原理详解
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- “网页内容无法访问”可能是跨域错误!
5G 时代的宣传热火朝天,万物互联的生活沉浸到方方面面,网络资源的访问成了人们生活中不可或缺的存在.访问使用的多了也经常会遇到无法访问的情况,这个时候打开 Console 往往会看到下面这种红彤彤一片 ...
- JS —— 5、数据交互、跨域
目录 26.数据交互 (1)原生请求 (2)参数解析 1.req.body--接收前端body的参数(下面演示:2) 2.req.query(下面演示:1) 3.req.params(下面演示:2.3 ...
- vue中axios访问Java后端跨域问题解决
vue中axios访问Java后端跨域问题解决 参考文章: (1)vue中axios访问Java后端跨域问题解决 (2)https://www.cnblogs.com/soinve/p/9295009 ...
- 后端配置了跨域配置前端访问还是提示跨域
后端配置文件: @Configuration public class WebAppConfiguration implements WebMvcConfigurer {/*** 解决跨域问题**/@ ...
- istio: h5应用访问后端接口 (跨域+路由管理)
本文实验链路:h5 > demo-a > demo-b 在实验过程出现跨域问题,直接使用istio解决,没有调整后端代码 h5应用版本准备 版本代码区分 实验需要h5项目有两个版本,为了区 ...
- SpringBoot之跨域过滤器配置允许跨域访问
跨域请求 当一个资源从与该资源本身所在的服务器不同的域或端口请求一个资源时,资源会发起一个跨域 HTTP 请求. 出于安全原因,浏览器限制从脚本内发起的跨源HTTP请求. 例如,XMLHttpRequ ...
- java web跨域拦截访问,多个域
1.配置 web.xml过滤器配置: <filter><filter-name>cors</filter-name><filter-class>com. ...
最新文章
- Jquery通过ajax请求NodeJS返回json数据
- python中浅拷贝和深拷贝分析
- caffe linux 教程,CentOS7安装Caffe的教程详解
- 程序员都是吃青春饭的?32岁程序员面试直接被面试官送走,心衰!
- 有没有可以搜PHP作业的软件,有没有可以搜计算机题库的软件?
- 10恢复出厂设置_Mac系统如何恢复出厂设置
- general protection fault怎么办_法院离婚调解书我想办补充协议怎么办?-免费法律咨询...
- 吉利汽车发布澄清公告:并未与百度公司合作生产智能电动车
- Oracle下载安装:
- PHP中英双语网站的设计思路
- 【C语言经典100题】求1~20阶乘的和
- 数据结构面试常见问题总结
- Matlab2014b GUI封装exe方法
- 记人生第一次工作面试 - 小米前端实习
- iOS客户端的title不显示解决方案
- 什么大牛不大牛,先A500题再说吧
- vue使用echart绘制全国地图,叠加图表
- 以太坊天价手续费转账真相:资金盘项目GoodCycle上演误杀瞒天记!
- 网站底部添加备案号和链接
- TinkerBoard-S 疑难杂症汇总(持续更新)
热门文章
- PCI网卡上扩展ROM编程 5.PCI扩展ROM
- 如何在Mendix中发布一个REST Service
- Google使用高手进阶
- java string转小数点_java string 小数点转long
- 小米mix2的Android9好久更新,小米安卓9.0更新计划再次更新,我的小米6和Mix 2呢?...
- 闲来无聊编的贪吃蛇最终版本
- php风车,用源码包来实现LAMP 的详细过程
- android 吧荣耀游戏下载地址,荣耀战歌下载_荣耀战歌安卓正版下载_游戏吧
- Raphael 实现手绘海南省三沙市地图
- 公司发的月饼出虫了~~~~