跨域的处理方式 JSONP和CORS和反向代理
- 什么是跨域? 首先了解同源策略,三个相同,协议,域名端口号相同就是同源,那么三者有任意不同就会造成跨域。跨域不常见,跨域基本上就是访问别人的资源。
- 如何解决跨域问题?
- 常见的有三种
- 一:jsonp处理跨域问题。
- 同源策略是浏览器的行为, 和 js 关系不大.
- 所谓跨域是指请求发起方页面所在的 url 与访问的 api 存在协议, 域名, 端口中任意一个不同即视为跨域. 并不单单是指域名.
- 也有一些访问是不受同源策略影响的:比如,script标签,img标签,link标签,video标签。
- 所以可以利用不受同源策略影响的标签来解决跨域问题
- 后端
- response.end("aaaa({name: 'quanquan', friend: 'guiling'})");
- 前端
- <script>
- // 由于后端返回的内容即将调用函数 aaaa, 那我们就预先定义一个呗, 这东西就叫回调函数
- function aaaa(param) {
- console.log('后端返回的参数是: ', param)
- }
- </script>
- <script src="http://localhost:8888/"></script>
- 总结:前段定义一个函数,把函数名通过script标签传给后端,后端拿到函数名然后返回韩顺调用,并且把参数当做参数传递即可。
- 二 :CORS(跨域共享资源)
- 前段
- <h3>CORS 实现跨域</h3>
- <script>
- var xhr = new XMLHttpRequest()
- xhr.open('GET', 'http://localhost:8888')
- xhr.onreadystatechange = function() { if(xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText) } }
- xhr.send()
- </script>
- 后端设置hearder即可
- 后端代码 be/cors/index.js
- const http = require('http');
- const PORT = 8888;
- // 创建一个 http 服务
- const server = http.createServer((request, response) => {
response.setHeader('Access-Control-Allow-Origin', '*');- response.end("{name: 'quanquan', friend: 'guiling'}");
- });
- // 启动服务, 监听端口
- server.listen(PORT, () => {
- console.log('服务启动成功, 正在监听: ', PORT);
- });
链接:https://juejin.im/post/5c0a55e76fb9a049ef2665ba
来源:掘金
跨域的处理方式 JSONP和CORS和反向代理的更多相关文章
- ajax跨域问题解决方案(jsonp,cors)
跨域 跨域有三个条件,满足任何一个条件就是跨域 1:服务器端口不一致 2:协议不一致 3:域名不一致 解决方案: 1.jsonp 在远程服务器上设法动态的把数据装进js格式的文本代码段中,供客户端调用 ...
- 跨域的问题(jsonp和cors)
由于浏览器的同源策略,用户想要跨域访问浏览器就会报错,那么就涉及到解决跨域的问题.最近我接触到的解决方法是两个,jsonp和cors. jsonp(json with padding)我们虽然不能直接 ...
- 004. 前端跨域资源请求: JSONP/CORS/反向代理
1.什么是跨域资源请求? https://www.cnblogs.com/niuli1987/p/10252214.html 同源: 如果两个页面的协议,端口(如果有指定)和域名都相同,则两个页面具有 ...
- 面试汇总——知道什么是同源策略吗?那怎么解决跨域问题?知道 JSONP 原理吗?
本文是面试汇总分支——知道什么是同源策略吗?那怎么解决跨域问题?知道 JSONP 原理吗?. 同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能, ...
- 同源策略、跨域、json和jsonp
同源策略 源(origin)就是协议.域名和端口号.若地址里面的协议.域名和端口号均相同则属于同源. 以下是相对于 http://www.a.com/test/index.html 的同源检测 • h ...
- 解决ajax跨域几种方式
发生跨域问题的原因: 浏览器的限制,出于安全考虑.前台可以正常访问后台,浏览器多管闲事报跨域问题,但其实前台已经访问到后台了. 跨域,协议.域名.端口任何一个不一样浏览器就认为是跨域. XHR(XML ...
- ajax跨域访问http服务--jsonp
在前面一篇文章<Spring Cloud 前后端分离后引起的跨域访问解决方案>里我们提到使用ajax跨域请求其他应用的http服务,使用的是后台增加注解@CrossOrigin或者增加Co ...
- 常用跨域方法总结(2)——CORS
常用跨域方法总结(2)--CORS 上篇文章介绍了几种常用的跨域方法:常用跨域方法总结,本片为上一篇的补充,对比较重要的Cross Origin Resource Sharing详细介绍. CORS ...
- 跨域请求解决方法(JSONP, CORS)
1.跨域 假设我们页面或者应用部署在 http://www.aaa.com 上了,而我们打算从 http://www.bbb.com 请求提取数据.一般情况下,如果我们直接使用 AJAX 来请求将会失 ...
随机推荐
- zabbix解决监控图中出现中文乱码问题
首先确定zabbix开启了中文支持功能:登录到zabbix服务器的数据目录下(前面部署的zabbix数据目录是/data/www/zabbix),打开 locales.inc.php文件[root@Z ...
- xml模块学习
import xml.etree.ElementTree as ET tree = ET.parse("xmltest.xml") root = tree.getroot() pr ...
- Centos7 操作系统 mysql5.7 配置远程登陆操作
Centos7 操作系统: mysql5.7 配置远程登陆操作: 首先登陆服务器,进入数据库: mysql -u root -p show databases; use mysql; show tab ...
- VC使用双缓冲制作绘图控件
最近用VC做了一个画图的控件.控件在使用的时候遇到点问题.在控件里画了图之后切换到其他页面,等再切换回来的时候,发现控件里画的图都不见了.这是因为VC里面,当缩小.遮挡页面后客户区域就会失效,当再次显 ...
- Docker中使用Tomcat并部署war工程
准备 首先从远程仓库拉取Tomcat镜像到本地. docker pull tomcat 使用images命令查看是否拉取成功. 创建镜像文件并将war包上传到同级目录下.(本文是在/usr/local ...
- css 动态线条制作方案
利用 :before or :after 在元素中添加线条样式: 设置样式的过渡效果属性值: 改变width,left,transform等属性值,设置鼠标移入:hover 效果: li: ...
- word里如何将模板的样式(标题啊、字体啊)导入到另外的模板里
点进去
- WEB实现单元格合并
function merge_quadefect() { //可实现合并单元格,上下行来比较 //debugger; var totalCols = 7; 列数 var totalRows = $(& ...
- 字节、字、bit、Byte、byte的关系区分
1.位(bit) 来自英文bit,音译为"比特", 表示二进制位.位是计算机内部数据存储最小单位,11010100是一个8位二进制数.一个二进制位只可以表示 ...
- 【转】linux服务器性能查看
转载自https://blog.csdn.net/achenyuan/article/details/78974729 1.1 cpu性能查看 1.查看物理cpu个数: cat /proc/cpuin ...