跨域相关知识及实现跨域的方法

对于跨域,可能对于不了解的有一定的难度,下面就和大家聊一下关于跨域的知识。
跨域了解一下?
其实跨域就是指一个域名的网页请求其他域名网页资源,但是浏览器不能执行其他网站的脚本,根本原因是由于同源政策的限制(等一下再说同源政策),而同源政策是浏览器施加的安全限制。
同源政策?
同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能。所谓同源是指"协议+域名+端口"三者相同,即缺一不可。
假如没有同源政策:
网站的cookie(包括隐私)可以随意访问,自己访问一些支付宝等账号信息由于没有退出而被其他人冒充,给自己造成很大的损失。

而同源政策可以限制Cookie、LocalStorage 和 IndexDB 无法读取 或者 DOM 和 Js对象无法获得以及 AJAX 请求不能发送等。
下面来看一下所谓的“同源”:
http:www.example.com:8080/local/index.html
http: 就是指的协议 www.example.com : 域名 8080 就是端口了

来几个判断吧:
file:www.example.com:8080/local/index.html 不同源(协议不同)
http:example.com:8080/local/index.html 不同源(域名不同)
http:www.example.com:8000/local/index.html 不同源(端口不同)
http:www.example.com:8080/local2/index.html 同源

下面给大家介绍几种跨域的方法:
1.jsonp跨域
这里说一下:都是自己的实例:
在这里插入图片描述

在这里插入图片描述

jsonp跨域只能用get请求

2.xhr跨域

在这里插入图片描述

在这里插入图片描述

3.iframe跨域

在这里插入图片描述

在这里插入图片描述

4.http跨域
node.js 代码:

var http = require(‘http’)
var https = require(‘https’) //这两个视接口选择
web.get(’/weather’,function(req ,res){
https.get(‘https://www.apiopen.top/weatherApi?city=哈尔滨’,function(sres){
var resData = new Buffer(’’)
// 当接收数据的时候
sres.on(‘data’,function(d){
// 拼接数据
resData += d
})
sres.on(‘end’,function(){
// 将接收到的数据使用json解析出来
resData = JSON.parse(resData)
res.send(resData)
})
})
})
前端代码:

Document 跨域

在这里插入图片描述

以上就是我个人所掌握的跨域方法;当然还有很多种方法,还需要学习,请大家多多提建议批评!!!

猜你喜欢

转载自blog.csdn.net/qq_43288277/article/details/84331011