前端跨域请求get_HTTP--跨域真的有这么难吗
前言
以前写前端小项目的时候就听说过跨域这个词,什么 JSONP啊,CORS啊。感觉很高级,但是无奈项目太小没机会用上。今天就写篇博客总结一下常用的跨域操作。
为什么要跨域
一般来说写项目的时候都是自己给自己发请求的,如 localhost:8080 发了一个 /users 请求,本质上就是向 localhost:8080/users 发请求,这是被允许的。但是如果给支付宝发是不行的,如 post /zhifubao/sendMoney/user?money=1000
,如果允许的话那每个人装一个 postman 不断发请求就可以去支付宝偷钱了(不考虑验证情况下)。所以呢跨域请求是不好的,但是在某些条件下是可以的。像大家都是兄弟公司,虽然我们域名不一样但是我们有 py 交易呀,数据都共享,你发请求给我,我也发请求给你,这就需要跨域请求了。
JSONP
JSONP 其实真名叫:JSON + Padding。JSON 大家都知道跟 JS 对象差不多,是一种通信格式。至于 Padding ,emmm 如果你知道这个原因就感觉很 SB。
为什么会有 JSONP
JSONP 本来不是用来解决跨域问题的,是用来实现发请求时不重刷页面的,这都是 Ajax 出现前的一个技术,或者说是一个替代品,只不过刚好可以用来实现跨域请求。
前端实现
实现思路是 1. 定义一个 loadData
函数在全局
function loadData(data) {console.log(data)
}
- 创建一个
<script>
标签,并在src
加上请求 url 如:/hello?callback=loadData
- 添加这个
<script>
标签到 document.body 上。一旦添加了浏览器马上会发一个/hello?callback=loadData
的 GET 请求 - 等服务器响应后,就会执行返回的 JS 代码。一般来说这 JS 代码就是这个 loadData(data),这个 data 是服务器添加上去的,至于怎么返回 JS 代码请看服务端实现
后端实现
- 首先获取查询参数里的 callback(回调函数的名字,这里就是 loadData)
- 然后生成要返回的数据
- 将数据和前端提取出来的回调函数结合,生成 JS 代码,返回到浏览器,浏览器一收到就会执行
app.get('/hello', (req,res) => {let callback = req.query.callback;let obj = {userName: 'Jack',password: '123456'};res.writeHead(200, {"Content-Type": "text/javascript"});res.end(callback + '(' + JSON.stringify(obj) + ')');
})
好了,这里说下 Padding 是啥,你看到 userName
和 password
前面的字符,那就是 Padding,没了。JSON 是因为传入回调函数的数据一般为 JSON 格式。
CORS
CORS 全名是 Corss Origin Resource Sharing。这种方法比较简单,因为前端发请求就好了,后端也正常返回数据。要改的是后端在返回响应时要添加一个响应头。
app.post('/hello',(req,res) => {if(req.headers.origin){res.writeHead(200, {"Content-Type": "text/html; charset=UTF-8","Access-Control-Allow-Origin":'http://127.0.0.1:8888'});let user= {userName: 'Jack',password: '123456'}res.end(JSON.stringify(user));}
})
这里解释一下:当浏览器发现发了跨域请求就会在请求头里添加 Origin: 当前域
字段。服务器此时会检测是否存在 Origin 字段,如果存在那么会在响应头里添加 Access-Control-Allow-Origin: Origin 的值
再返回 JSON 格式结果就行了。前端收到响应后,浏览器会检查 Access-Control-Allow-Origin
的值是否和当前的地址相同,如果相同才能获取到数据。
postMessage
这个方法主要是在前端完成的。在发送请求方只需要调用新 API 的 postMessage
函数就可以了。
postMessage('要发送的消息', '目的地地址', '当前地址')
在接受方要在 window
上监听一个 message
事件。
function receiveMessage(event) {// 对发送者做检查 ,如果不是自己人就不返回if (event.origin !== "http://example.com:8080")return;// 这里可以打印发送方的消息console.log(event.data)// 如果是自己人,就返回数据 event.source.postMessage("你好,自己人",event.origin)
}// 全局监听 `message` 事件
window.addEventListener("message", receiveMessage, false);
这种方法比较简单,但是也要做好发送方的检测。
前端跨域请求get_HTTP--跨域真的有这么难吗相关推荐
- java跨站点脚本编制_跨站点请求伪造 跨站点脚本编制 通过框架钓鱼漏洞 | 学步园...
1.跨站点请求伪造 跨站点脚本编制 通过框架钓鱼漏洞 主要是通过在url或参数中添加脚本如: 1.URL中添加 2.参数value=. 添加一个过滤器对特殊字符进行拦截 package com.xxx ...
- 前端学习(2602):什么是跨域请求和跨域请求数据数据的表现
- 前端跨域请求及解决方案
什么是跨域请求 在前端开发编码过程中,常见的HTML标签例如:a.form.img.script.link.iframe以及ajax操作都可以指向一个资源地址或者说发起一个资源请求,那么这里所说的请求 ...
- jsonp跨域原理_【网站技术解读①】Javascript实现跨域请求
推荐一个读者做的不错的编程学习网站: 网站:潜安 域名:http://www.qianani.com 另外将会不定期推送近期网站用到的一些技术,讲一些核心原理,今天为第一篇 问题由来: 最近一直在优化 ...
- CORS——跨域请求那些事儿
[本期嘉宾介绍]睿得,具有多年研发.运维.安全等IT相关从业经历.目前从事CDN.存储.视频直播点播的技术支持.喜爱钻研,喜爱编码,喜爱分享. 在日常的项目开发时会不可避免的需要进行跨域操作,而在实际 ...
- java angularjs 跨域访问_AngularJS实现跨域请求
跨域,前端开发中常常遇到的问题.AngularJS实现跨域方式类似于Ajax.使用CORS机制. 以下阐述一下AngularJS中使用$http实现跨域请求数据. AngularJS XMLHttpR ...
- 使用nginx反向代理发起跨域请求
任务5:http://www.jnshu.com/task/2/45/detail//#1 页面文件放在github:https://github.com/Resalee/css_task/tree/ ...
- thinkphp ajax 跨域请求 Access-Control-Allow-Origin 完美解决
在前后端分离的开发中,前端经常遇到请求接口跨域的问题 遇到这种问题,解决方法有两种: 方法一.用jsonp的格式返回数据给前端,而不是json,这个方法治标不治本,需要注意的是,使用jsonp的时候, ...
- Ajax(跨域请求)
JSONP 跨域请求 CORS 跨域请求 proxy代理请求 1.什么是跨域 首先,现代浏览器为了安全,做了一个同源限制. 也就是所谓的同源安全策略. 本质上,其实是不存在所谓的跨不跨域的. 把浏览器 ...
- ajax跨域请求时 会出现什么问题,在用AJAX跨域请求时遇到的问题
刚刚接触ajax就遇到一个词--跨域. 在我百度了各种资料以后总结了一句话:"只要不是在一个协议.域.名端口下,都属于跨域(127.0.0.1本地也属于跨域)". 在做ajax请求 ...
最新文章
- 面对千亿客服市场:曾经人工当道,如今AI为王
- BZOJ1083: [SCOI2005]繁忙的都市
- 英语关于计算机的作文600字,有关电脑的作文600字
- Bootstrap4+MySQL前后端综合实训-Day07-PM【用户信息管理页面——功能展示(分页显示数据、添加用户、批量删除用户、编辑用户信息)、servlet项目代码整理汇总】
- SAP Spartacus ConfigInitializerService里的isStable属性
- [JavaScript][转]offsetParent和parentElement的区别
- 数据结构与算法之树的遍历
- struts2 + json 包冲突问题
- JavaScript正则表达式 1
- 解决libcrypto.so.1.0.0 动态库找不到的问题
- 问题匹配/文本匹配数据集(自用)
- 锐文科技发布基于国产FPGA的智能网卡芯片
- Unity Shader之uv旋转
- 【标准】要点整理-软件服务商交付能力评估标准
- 万能的尾盘选股技巧!今日学明天买,后天稳健盈利!短线炒股一定要收藏!
- 马士兵学习笔记-Java基础网络编程
- BFD快速检测工作原理
- JS 进一法 四舍五入
- Python数据分析训练营——Python基础语法
- 第一章 JDBC基础操作 ② 代码
热门文章
- 2020春季学期信号与系统课堂参与信息处理
- iframe内联元素有白边原因_Selenium无法定位元素的几种解决方案
- Linux系统备份树莓派,全平台备份树莓派的方法
- escape php解码,PHP对escape的字符串进行解密 、加密 | 学步园
- python基础课程第12章,Python基础教程学习笔记 | 第12章 | 图形用户界面
- python 4.5%2_程序运行慢?你怕是写的假 Python
- 【 C 】在单链表中插入一个新节点的尝试(二)
- 用行为级描述方式实现一个加法器电路(基于ISE的设计)(2输入1位全加器电路)
- web.config中sessionState节点的配置方案
- SAP Query达到select * where 的效果 2011-04-29