zoukankan      html  css  js  c++  java
  • 跨域

    1.什么是跨域?
    本地域与服务端的域不一致,是由浏览器同源策略限制的场景,不同源即不同域,就是跨域。
     
    注意:协议端口不同造成的跨域,前台无能为力。 域仅仅是通过URL的首部来识别,而不会去尝试判断相同的IP对应着两个域 。 或者两个域是否在同一个IP上。
     
     
    2.什么是同源策略?
    浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同。
     
    只要 "协议+域名+端口" 任何一个不同都被当作不同的域。
     
    3.跨域解决方案
    (1)通过jsonp跨域
    JSONP:
    原理是:
    动态插入script标签,通过script标签引入一个js文件,这个js文件载入成功后会执行我们在url参数中指定的函数,并且会把我们需要的json数据作为参数传入。
    由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源,为了实现跨域请求,可以通过script标签实现跨域请求,然后在服务端输出JSON数据并执行回调函数,从而解决了跨域的数据请求。
     
    JSONP:json+padding(内填充),顾名思义,就是把JSON填充到一个盒子里
     
    优点:是兼容性好,简单易用,支持浏览器与服务器双向通信。
    缺点:只支持get。只支持http
    JSONP的优点是:它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制;它的兼容性更好,在更加古老的浏览器中都可以运行,不需要XMLHttpRequest或ActiveX的支持;并且在请求完毕后可以通过调用callback的方式回传结果。
    JSONP的缺点则是:它只支持GET请求而不支持POST等其它类型的HTTP请求;它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题。
    <script> function createJs(sUrl){ var oScript = document.createElement('script'); oScript.type = 'text/javascript'; oScript.src = sUrl; document.getElementsByTagName('head')[0].appendChild(oScript); } createJs('jsonp.js'); box({ 'name': 'test' }); function box(json){ alert(json.name); } </script>
     
    总结:通过iframe的src属性由外域转向本地域,跨域数据即由iframe的window.name从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制,但同时它又是安全操作。
     
    6、 跨域资源共享(CORS)
    普通跨域请求:只服务端设置Access-Control-Allow-Origin即可,前端无须设置,若要带cookie请求:前后端都需要设置。
    需注意的是:由于同源策略的限制,所读取的cookie为跨域请求接口所在域的cookie,而非当前页。
    目前,所有浏览器都支持该功能(IE8+:IE8/9需要使用XDomainRequest对象来支持CORS)),CORS也已经成为主流的跨域解决方案。
     
    CORS
    服务器端对于CORS的支持,主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置,就可以允许Ajax进行跨域的访问。
    通过修改document.domain来跨子域
    将子域和主域的document.domain设为同一个主域.前提条件:这两个域名必须属于同一个基础域名!而且所用的协议,端口都要一致,否则无法利用document.domain进行跨域
    主域相同的使用document.domain
    使用window.name来进行跨域
    window对象有个name属性,该属性有个特征:即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的,每个页面对window.name都有读写的权限,window.name是持久存在一个窗口载入过的所有页面中的
    使用HTML5中新引进的window.postMessage方法来跨域传送数据
    还有flash、在服务器上设置代理页面等跨域方式。个人认为window.name的方法既不复杂,也能兼容到几乎所有浏览器,这真是极好的一种跨域方法。
     
    针对react版本^16.6.0有多种解决方案
     
    方案一:package.json中加上proxy代理配置
    在packge.json加入
    “proxy”:{
    '/app':{
    "tatget":"http://server.sssss.com:8080/.....",
    secure:false,
    "changeOrigin":true,
    }
    }
     
    axios
     
    import axios from 'axios'
    http.post = function(api, data){
    return new Promise((resolve, reject) =>{
    axios.post(api, params).then((tes)=>{resolve(res)})
    })
    }
     
    http.get = function(api, data){
    return new Promise((resolve, reject) =>{
    axios.get(api, params).then((tes)=>{resolve(res)})
    })
    }
    export default http
     
    在react组件中使用
    const res = await http.post(url, params)
     
     
  • 相关阅读:
    错误处理
    触发器
    存储过程
    用户自定义函数
    动态 SQL
    临时表
    游标
    流程控制元素
    锁定和阻塞
    Spring内置事件以及自定义事件
  • 原文地址:https://www.cnblogs.com/iOS-mt/p/11315819.html
Copyright © 2011-2022 走看看