跨域

2019-10-07  本文已影响0人  楼水流云

同源策略
同协议(http)同域名(www.baidu.com)同端口(8080)

跨域就是当前ajax的接口如http://a.com:8080/getWeather 和当前页面的url b.com:8080/index.html不同源
请求发出去服务器收到了 服务器也给了响应 但是被浏览器拦截了 因为浏览器觉得这个数据是不安全的(跨域的)


跨域的几种方法:

1.jsonp实现跨域 老的浏览器使用jsonp
可以绕过同源策略实现跨域 需要同后端协商好支持callback 这就是jsonp

与后端商量这个接口收到请求后 看看有没有一个叫 callback=showData的参数 有的话返回数据的时候作一些处理 如:
假设开始返回的数据:{'city':'hangzhou','weather':'晴天'} 如果有callback=showData的话返回:showData({'city':'hangzhou','weather':'晴天'}) 这种格式的数据

目的是先把函数声明好 然后执行函数 把数据作为参数 showData({'city':'hangzhou','weather':'晴天'})
<script src="http://www.baidu.com/weather.php?callback=showData"></script>


2.cors实现跨域 ie10>=使用cors
cors 跨资源共享 对ajax功能的扩展 ie10>=以上版本

在后端声明 我这个网站允许哪些网站访问数据 http://localhost:8080 或者 http://127.0.0.1:8080
res.setHeader("Access-Control-Allow-Origin","http://localhost:8080")

这里意思是任何人都可以使用我的数据
res.setHeader("Access-Control-Allow-Origin","*")


3.iframe的跨域方法 降域
iframe只有相同域名才能访问内容
降域 两个域可以 "有条件" 的互相访问


降域方法:
(1).document.domain = "jrg.com"
如果有两个域名{http://a.jrg.com} 和 {http://b.jrg.com} 后面的jrg.com一样 但前面的a+b不一样
这样的话可以使用 document.domain = "jrg.com" 让当前的域进行降域 这样二者就可以相互操作访问 前提是jrg.com一样


(2).postMessage
postMessage没有主域的限制

a.文件 当需要和iframe里的内容操作的时候 我去向我当前的iframe去postMessage(this.value,"*")一个东西内容 代表所有域都可以接受
window.frames[0].postMessage(this.value,'
')

b.文件 本身页面 去监听message事件 监听到后去做一些操作
window.addEventListener('message',function(e){
%('#input').value = e.data
console.log(e.data)
})


购买域名网址
4.cn 中文网站
namesilo.com 外文网站 比较便宜

如何伪装一个网站(在本地)
1、编辑hosts文件 地址
mac:sudo vi/etc/hosts
windows: c:\windows\system32\drivers\etc\hosts
2、添加一行127.0.0.1 zhihu.com
3、设置的80端口 (默认不用写 如8080要写)
mac: sudo http-server-c-1-p 80
windows:
1、以管理员身份运行git bash
2、http-server-c-1-p 80
4、访问 zhihu.com:80

要与后端约定
1、约定地址接口 url: "/hello"
2、约定接口类型 method: "get"
3、商量后端返回数据样式

上一篇下一篇

猜你喜欢

热点阅读