跨域

作者: 楼水流云 | 来源:发表于2019-10-07 20:59 被阅读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、商量后端返回数据样式

    相关文章

      网友评论

          本文标题:跨域

          本文链接:https://www.haomeiwen.com/subject/sbqcpctx.html