1. 什么是跨域? 首先了解同源策略,三个相同,协议,域名端口号相同就是同源,那么三者有任意不同就会造成跨域。跨域不常见,跨域基本上就是访问别人的资源。
  2.  
  3. 如何解决跨域问题?
  4.  
  5. 常见的有三种
  6.  
  7. 一:jsonp处理跨域问题。
  8.  
  9. 同源策略是浏览器的行为, js 关系不大.
  10. 所谓跨域是指请求发起方页面所在的 url 与访问的 api 存在协议, 域名, 端口中任意一个不同即视为跨域. 并不单单是指域名.
  11. 也有一些访问是不受同源策略影响的:比如,script标签,img标签,link标签,video标签。
  12. 所以可以利用不受同源策略影响的标签来解决跨域问题
  13. 后端
  14.  
  15. response.end("aaaa({name: 'quanquan', friend: 'guiling'})");
  16. 前端
  17.  
  18. <script>
  19. // 由于后端返回的内容即将调用函数 aaaa, 那我们就预先定义一个呗, 这东西就叫回调函数
  20. function aaaa(param) {
  21. console.log('后端返回的参数是: ', param)
  22. }
  23. </script>
  24. <script src="http://localhost:8888/"></script>
  25. 总结:前段定义一个函数,把函数名通过script标签传给后端,后端拿到函数名然后返回韩顺调用,并且把参数当做参数传递即可。
  26. CORS(跨域共享资源)
  27. 前段
  28. <h3>CORS 实现跨域</h3>
  29. <script>
  30. var xhr = new XMLHttpRequest()
  31. xhr.open('GET', 'http://localhost:8888')
  32. xhr.onreadystatechange = function() { if(xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText) } }
  33. xhr.send()
  34. </script>
  35.  
  36. 后端设置hearder即可
  37. 后端代码 be/cors/index.js
  38.  
  39. const http = require('http');
  40.  
  41. const PORT = 8888;
  42.  
  43. // 创建一个 http 服务
  44. const server = http.createServer((request, response) => {
    response.setHeader('Access-Control-Allow-Origin', '*');
  45. response.end("{name: 'quanquan', friend: 'guiling'}");
  46. });
  47.  
  48. // 启动服务, 监听端口
  49. server.listen(PORT, () => {
  50. console.log('服务启动成功, 正在监听: ', PORT);
  51. });
 

链接:https://juejin.im/post/5c0a55e76fb9a049ef2665ba
来源:掘金

跨域的处理方式 JSONP和CORS和反向代理的更多相关文章

  1. ajax跨域问题解决方案(jsonp,cors)

    跨域 跨域有三个条件,满足任何一个条件就是跨域 1:服务器端口不一致 2:协议不一致 3:域名不一致 解决方案: 1.jsonp 在远程服务器上设法动态的把数据装进js格式的文本代码段中,供客户端调用 ...

  2. 跨域的问题(jsonp和cors)

    由于浏览器的同源策略,用户想要跨域访问浏览器就会报错,那么就涉及到解决跨域的问题.最近我接触到的解决方法是两个,jsonp和cors. jsonp(json with padding)我们虽然不能直接 ...

  3. 004. 前端跨域资源请求: JSONP/CORS/反向代理

    1.什么是跨域资源请求? https://www.cnblogs.com/niuli1987/p/10252214.html 同源: 如果两个页面的协议,端口(如果有指定)和域名都相同,则两个页面具有 ...

  4. 面试汇总——知道什么是同源策略吗?那怎么解决跨域问题?知道 JSONP 原理吗?

    本文是面试汇总分支——知道什么是同源策略吗?那怎么解决跨域问题?知道 JSONP 原理吗?. 同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能, ...

  5. 同源策略、跨域、json和jsonp

    同源策略 源(origin)就是协议.域名和端口号.若地址里面的协议.域名和端口号均相同则属于同源. 以下是相对于 http://www.a.com/test/index.html 的同源检测 • h ...

  6. 解决ajax跨域几种方式

    发生跨域问题的原因: 浏览器的限制,出于安全考虑.前台可以正常访问后台,浏览器多管闲事报跨域问题,但其实前台已经访问到后台了. 跨域,协议.域名.端口任何一个不一样浏览器就认为是跨域. XHR(XML ...

  7. ajax跨域访问http服务--jsonp

    在前面一篇文章<Spring Cloud 前后端分离后引起的跨域访问解决方案>里我们提到使用ajax跨域请求其他应用的http服务,使用的是后台增加注解@CrossOrigin或者增加Co ...

  8. 常用跨域方法总结(2)——CORS

    常用跨域方法总结(2)--CORS 上篇文章介绍了几种常用的跨域方法:常用跨域方法总结,本片为上一篇的补充,对比较重要的Cross Origin Resource Sharing详细介绍. CORS ...

  9. 跨域请求解决方法(JSONP, CORS)

    1.跨域 假设我们页面或者应用部署在 http://www.aaa.com 上了,而我们打算从 http://www.bbb.com 请求提取数据.一般情况下,如果我们直接使用 AJAX 来请求将会失 ...

随机推荐

  1. zabbix解决监控图中出现中文乱码问题

    首先确定zabbix开启了中文支持功能:登录到zabbix服务器的数据目录下(前面部署的zabbix数据目录是/data/www/zabbix),打开 locales.inc.php文件[root@Z ...

  2. xml模块学习

    import xml.etree.ElementTree as ET tree = ET.parse("xmltest.xml") root = tree.getroot() pr ...

  3. Centos7 操作系统 mysql5.7 配置远程登陆操作

    Centos7 操作系统: mysql5.7 配置远程登陆操作: 首先登陆服务器,进入数据库: mysql -u root -p show databases; use mysql; show tab ...

  4. VC使用双缓冲制作绘图控件

    最近用VC做了一个画图的控件.控件在使用的时候遇到点问题.在控件里画了图之后切换到其他页面,等再切换回来的时候,发现控件里画的图都不见了.这是因为VC里面,当缩小.遮挡页面后客户区域就会失效,当再次显 ...

  5. Docker中使用Tomcat并部署war工程

    准备 首先从远程仓库拉取Tomcat镜像到本地. docker pull tomcat 使用images命令查看是否拉取成功. 创建镜像文件并将war包上传到同级目录下.(本文是在/usr/local ...

  6. css 动态线条制作方案

    利用 :before   or    :after  在元素中添加线条样式: 设置样式的过渡效果属性值: 改变width,left,transform等属性值,设置鼠标移入:hover 效果: li: ...

  7. word里如何将模板的样式(标题啊、字体啊)导入到另外的模板里

    点进去

  8. WEB实现单元格合并

    function merge_quadefect() { //可实现合并单元格,上下行来比较 //debugger; var totalCols = 7; 列数 var totalRows = $(& ...

  9. 字节、字、bit、Byte、byte的关系区分

    1.位(bit)             来自英文bit,音译为"比特", 表示二进制位.位是计算机内部数据存储最小单位,11010100是一个8位二进制数.一个二进制位只可以表示 ...

  10. 【转】linux服务器性能查看

    转载自https://blog.csdn.net/achenyuan/article/details/78974729 1.1 cpu性能查看 1.查看物理cpu个数: cat /proc/cpuin ...