跨域

作者: A落儿 | 来源:发表于2020-07-15 15:21 被阅读0次

    同源策略

    1. 所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)端口号(port)
    2. 同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源。 同源策略是浏览器安全的基石
    3. 同源策略会阻止一个域的 javascript 脚本和另外一个域的内容进行交互。例如办公内外网环境,当我们访问外网一个恶意网站的时候,恶意网站就会利用我们的主机向内网的 url 发送 ajax 请求,破坏或盗取数据

    浏览器的非同源限制

    1. 无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB
    2. 无法接触非同源网页的 DOM和js对象
    3. 无法向非同源地址发送 AJAX 请求,即 XHR 请求

    解决跨域的方案

    1、通过jsonp跨域
    2、 document.domain + iframe跨域
    3、 location.hash + iframe
    4、 window.name + iframe跨域
    5、 postMessage跨域
    6、 跨域资源共享(CORS)
    7、 nginx代理跨域
    8、 nodejs中间件代理跨域
    9、 WebSocket协议跨域

    vue实现跨域

    配置proxyTable下面的参数就可以实现。
    原理:跨域是浏览器禁止的,服务器并不禁止,使用proxyTable的原理就是将域名发送给本地的服务器,再由本地的服务器去请求真正的服务器。

    实现跨域的方法

    1. 关闭浏览器的安全策略,实现跨域,以谷歌举例:
    // windows中新建一个bat文件粘贴下面的命令即可以此模式打开
    cd "C:\Program Files (x86)\Google\Chrome\Application"
    chrome.exe --disable-web-security --user-data-dir=c:/CorsUserData
    
    1. 服务端的CORS跨域设置和JSONP

    JSONP只支持GET请求,CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器,以及可以向不支持CORS的网站请求数据。

    参考网站:1. https://www.cnblogs.com/n031/p/11828797.html

    1. https://segmentfault.com/a/1190000011145364

    2. https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy

    相关文章

      网友评论

          本文标题:跨域

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