跨域

2018-08-06 09:10:37来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

同源策略(Same origin Policy)

浏览器出于安全方面的考虑,只允许与本域下的接口交互。不同源的客户端脚本在没有明确授权的情况下,不能读写对方的资源。

本域指的是

  • 同协议:如都是http或者https
  • 同域名:如都是 http://evenyao.com/a 和 http://evenyao.com/b
  • 同端口:如都是80端口

如:

  • http://evenyao.com/a/b.js 和 http://evenyao.com/index.php (同源)

不同源的例子:

  • http://evenyao.com/main.js 和 https://evenyao.com/a.php (协议不同)
  • http://evenyao.com/main.js 和 http://bbs.evenyao.com/a.php (域名不同,域名必须完全相同才可以)
  • http://evenyao.com/main.js 和 http://evenyao.com:8080/a.php (端口不同,前者是80端口)

对于当前页面来说页面存放的 JS 文件的域不重要,重要的是加载该 JS 页面所在什么域

报错范例

使用 nodejs ,参考下面代码

//server.js 服务端 代码
var http = require('http')
var fs = require('fs')
var url= require('url')

http.createServer(function(req,res){
  var pathObj = url.parse(req.url,true)
  console.log(pathObj)

  switch(pathObj.pathname){
    case '/getWeather':
    res.setHeader('content-Type','text/json; charset=utf-8')
      if(pathObj.query.city === 'beijing'){
        ret = {
          city:'beijing',
          weather: '晴天'
        }
      }else{
        ret = {
          city: pathObj.query.city,
          weather: '不知道'
        }
      }
      res.end(JSON.stringify(ret))
      break;
    case '/user/123':
      res.end( fs.readFileSync(__dirname + '/static/user') )
      break;
    default:
      res.end( fs.readFileSync(__dirname + '/static' + pathObj.pathname) )
  }
}).listen(9003)
console.log('visit http://localhost:9003/index.html')
<!--index.html-->
<h1>hello weather</h1>
<script>
var xhr = new XMLHttpRequest()
xhr.open('GET', 'http://127.0.0.1:9003/getWeather?city=beijing',true)
xhr.send()
xhr.onload = function(){
  console.log(JSON.parse(xhr.responseText))
}
</script>

 

使用127.0.0.1:9003/getWeather?city=beijing获取数据正常

在hosts文件中添加一条DNS记录 127.0.0.1 指向 a.com 域名

使用a.com:9003/getWeather?city=beijing获取数据报错

 

跨域的几种方法

JSONP

HTML 中 script 标签可以加载其他域下的 JS,比如我们经常引入一个其他域下线上cdn的jQuery。那如何利用这个特性实现从其他域下获取数据呢?

可以先这样试试:

<script src="http://api.evenyao.com/weather.php"></script>

这时候会向天气接口发送请求获取数据,获取数据后做为 js 来执行。 但这里有个问题, 数据是 JSON 格式的数据,直接作为 JS 运行的话我如何去得到这个数据来操作呢?

这样试试:

<script src="http://api.evenyao.com/weather.php?callback=showData"></script>

这个请求到达后端后,后端会去解析callback这个参数获取到字符串showData,在发送数据做如下处理:

之前后端返回数据: {"city": "hangzhou", "weather": "晴天"} 现在后端返回数据: showData({"city": "hangzhou", "weather": "晴天"}) 前端script标签在加载数据后会把 「showData({“city”: “hangzhou”, “weather”: “晴天”})」做为 js 来执行,这实际上就是调用showData这个函数,同时参数是 {“city”: “hangzhou”, “weather”: “晴天”}。 用户只需要在加载提前在页面定义好showData这个全局函数,在函数内部处理参数即可。

<script>
function showData(ret){
console.log(ret);
}
</script>
<script src="http://api.evenyao.com/weather.php?callback=showData"></script>

JSONP(JSON with padding),总结:

JSONP是通过 script 标签加载数据的方式去获取数据当做 JS 代码来执行 提前在页面上声明一个函数,函数名通过接口传参的方式传给后台,后台解析到函数名后在原始数据上「包裹」这个函数名,发送给前端。换句话说,JSONP 需要对应接口的后端的配合才能实现。

server.js

var http = require('http')
var fs = require('fs')
var path = require('path')
var url =  require('url')

http.createServer(function(req,res){
  var pathObj = url.parse(req.url,true)

  switch (pathObj.pathname) {
    case '/getNews':
      var news = [
        "保罗乔治钓鱼竞标赛圆满结束:感谢你们所有人的参赛",
        "威斯布鲁克妻子透露将自己与丈夫的第二个孩子",
        "[翻译团]防守将会使雷霆在2018-19赛季更上一层楼"
      ]
      res.setHeader('content-Type','text/json; charset=utf-8')
      if(pathObj.query.callback){
        res.end(pathObj.query.callback + '(' + JSON.stringify(news) + ')')
      }else{
        res.end(JSON.stringify(news))
      }

      break;

    default:
      fs.readFile(path.join(__dirname,pathObj.pathname),function(e,data){
        if(e){
          res.writeHead(404,'not found')
          res.end('<h1>404 Nof Found</h1>')
        }else{
          res.end(data)
        }
      })
  }
}).listen(9004)
console.log('visit http://localhost:9004/index.html')

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>JSONP 跨域</title>
</head>
<body>
  <div class="container">
    <ul class="news">
    </ul>
    <button class="show">show news</button>
  </div>

  <script>
    function $(selector){
      return document.querySelector(selector)
    }

    $('.show').addEventListener('click',function(){
      var script = document.createElement('script')
      script.src = 'http://127.0.0.1:9004/getNews?callback=appendHtml'
      document.head.appendChild(script)  //添加script
      document.head.removeChild(script)  //移除script
    })

    function appendHtml(news){
      var html = ''
      for (var i=0; i < news.length; i++ ){
        html += '<li>' + news[i] + '</li>'
      }
      console.log(html)
      $('.news').innerHTML = html
    }
  </script>
</body>
</html>

打开终端,输入 node server.js ,浏览器打开 http://localhost:9004/index.html

CORS

CORS 全称是跨域资源共享(Cross-Origin Resource Sharing),是一种 ajax 跨域请求资源的方式,支持现代浏览器,IE支持10以上。 实现方式很简单,当你使用 XMLHttpRequest 发送请求时,浏览器发现该请求不符合同源策略,会给该请求加一个请求头:Origin,后台进行一系列处理,如果确定接受请求则在返回结果中加入一个响应头:Access-Control-Allow-Origin; 浏览器判断该相应头中是否包含 Origin 的值,如果有则浏览器会处理响应,我们就可以拿到响应数据,如果不包含浏览器直接驳回,这时我们无法拿到响应数据。所以 CORS 的表象是让你觉得它与同源的 ajax 无区别,代码完全一样。

server.js

var http = require('http')
var fs = require('fs')
var path = require('path')
var url =  require('url')

http.createServer(function(req,res){
  var pathObj = url.parse(req.url,true)

  switch (pathObj.pathname) {
    case '/getNews':
      var news = [
        "保罗乔治钓鱼竞标赛圆满结束:感谢你们所有人的参赛",
        "威斯布鲁克妻子透露将自己与丈夫的第二个孩子",
        "[翻译团]防守将会使雷霆在2018-19赛季更上一层楼"
      ]
      res.setHeader('Access-Control-Allow-Origin','http://localhost:9005') //CORS跨域
      res.setHeader('content-Type','text/json; charset=utf-8')
      res.end(JSON.stringify(news))

      break;

    default:
      fs.readFile(path.join(__dirname,pathObj.pathname),function(e,data){
        if(e){
          res.writeHead(404,'not found')
          res.end('<h1>404 Nof Found</h1>')
        }else{
          res.end(data)
        }
      })
  }
}).listen(9005)
console.log('visit http://localhost:9005/index.html')

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>CORS 跨域</title>
</head>
<body>
  <div class="container">
    <ul class="news">
    </ul>
    <button class="show">show news</button>
  </div>

  <script>
    function $(selector){
      return document.querySelector(selector)
    }

    $('.show').addEventListener('click',function(){
      var xhr = new XMLHttpRequest()
      xhr.open('GET','http://127.0.0.1:9005/getNews',true)
      xhr.send()
      xhr.onload = function(){
        appendHtml(JSON.parse(xhr.responseText))
      }
    })

    function appendHtml(news){
      var html = ''
      for (var i=0; i < news.length; i++ ){
        html += '<li>' + news[i] + '</li>'
      }
      console.log(html)
      $('.news').innerHTML = html
    }
  </script>
</body>
</html>

启动终端,执行 node server.js ,浏览器打开 http://localhost:9005/index.html ,查看效果和网络请求

参考

前端常见跨域解决方案(全)

node-server

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:Json 数组

下一篇:理解运用JS的闭包、高阶函数、柯里化