跨域的三种解决方式

Posted 放咩咩的星星

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了跨域的三种解决方式相关的知识,希望对你有一定的参考价值。

跨域问题

跨域问题对于WEB前端工程师来说是比较重要的一个问题,因为我们时常需要去解决这样的问题,在其他类型的前端开发来说,他们并没有跨域问题

跨域问题的产生

因为浏览器有同源策略:只有在同域名,同端口,同协议的情况下才可以进行数据交互;

有的时候,例如,在公司开发项目的时候,前端开发的服务器可能和后端服务器不是同一个,因为可能是通过gulp、webpack搭建的开发服务器,就需要解决跨域问题,再例如,在大公司有,数据服务器不只有一个,所以跨域问题也必然存在

解决方法

jsonp

是一种前后端结合的跨域方式,原理就是通过script标签的src属性来进行数据请求,因为其不受同源策略的影响,故而能请求到数据,需要注意的是,数据处理需要通过回调函数来进行,而本质上,我们把回调函数的名字告诉后端,后端将数据放入到回调函数里,所以说需要告知后端,回调函数是什么,这也就是为什么说是前后端结合的方式。

注意:一个script只能请求一次,多次请求应该去动态的创建script,回调函数也只能使用一次,所以也需要动态创建 ,使用完成后移除,避免污染全局空间

缺点:只能get请求

 

nodejs:

  app.get(‘/data‘, function (req, res) {

      //后端的任务,就是把数据放到前端的那个函数里并给它执行一下

      //直接返回这个操作的js字符串,因为这个字符串会被script当成js代码来运行

      //前端回调函数的名字

      let fn = req.query[‘callback‘]

      var content = fs.readFileSync(‘./datas/data.json‘)+‘‘

      //返回给前端函数数据

      res.send(fn+‘(‘+content+‘)‘);

  });

 

  js:

  Jsonp({

      url:"http://localhost:3000/data",

      success(results){

          console.log(results)

      }

  })

  function Jsonp({url,success}) {

      //动态创建script标签

      let $script = $("<script>")

 

      //随机函数名字

      var random_name = ‘random_fn_‘+Date.now()

      //创建的随机全局函数

      window[random_name] = function(data){

          success(data)

          //处理完数据之后,将script删掉,函数delete掉

          $script.remove()

          delete window[random_name]

 

      }

      $script[0].src = url+‘?callback=‘+random_name

      $("body").append($script)  

  }

cors

纯后端的解决方式,每次请求都会有一个origin信息被后端捕捉,后端可以通过设置对这个origin的域允许访问来解决跨域问题

node:

   app.get("/data_cors",(req,res)=>{

       //此次请求的源信息

       var reqOrigin = req.header("origin");  

       //如果源信息存在,且源是运行访问的

       if(reqOrigin !=undefined && reqOrigin.indexOf("http://localhost:9000") > -1){ 

       //设置允许 http://localhost:3000 这个域响应 

       res.header("Access-Control-Allow-Origin", "http://localhost:9000");  //允许这个域访问

       res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");  //允许的请求方法

       res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With"); 

       } 

       res.send(‘123‘)

   })

 

   js:

   $.ajax({

       url:"http://localhost:3000/data_cors",

       success(results){

           console.log(results)

       }

   })

服务端代理proxy

因为服务器间的数据交互没有跨域限制,所以我们可以通过一个中间代理服务器来请求目标服务器的数据,也就是开发服务器发送请求到代理服务器,代理服务器再请求目标服务器,将数据返回给开发服务器

目标服务器接口 3000:

  app.get("/data_proxy",(req,res)=>{

      //此次请求的源信息

      res.send(‘proxy‘)

  })

 

  代理服务器1234:

  app.get("/to3000",(req,res)=>{

      //代理服务器1234对9000做跨域处理

      var reqOrigin = req.header("origin");  

      //如果源信息存在,且源是运行访问的

      if(reqOrigin !=undefined && reqOrigin.indexOf("http://localhost:9000") > -1){ 

      //设置允许 http://localhost:3000 这个域响应 

      res.header("Access-Control-Allow-Origin", "http://localhost:9000");  //允许这个域访问

      res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");  //允许的请求方法

      res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With"); 

      }

      //获取到9000真正要调用的3000目标服务器的接口

      var url = req.query[‘url‘]

      let _res = res

      //代理服务器1234像目标服务器3000发送请求(没有跨域限制)

      http.get(url,(res)=>{

          let result=‘‘

          res.on("data",(chunk)=>{

              result+=chunk

          })

          res.on("end",()=>{

              console.log(result)

              //代理服务器1234将请求到的目标服务器3000的数据返回给开发服务器9000

              _res.send(result)

          })

      })

  })

  app.listen(1234);

 

  开发服务器9000:

  //当前服务器9000向代理服务器1234发送请求

  $.ajax({

      url:"http://localhost:1234/to3000",

      data:{

          url:"http://localhost:3000/data_proxy"

      },

      success(results){

          console.log(results)

      }

  })

以上是关于跨域的三种解决方式的主要内容,如果未能解决你的问题,请参考以下文章

跨域以及解决跨域的几种方式

跨域的三种解决方案

前端跨域的三种解决方案

jQuery跨域请求带Cookie和Session的方法

Spring跨域的解决方式

AJAX实现跨域的三种方法