首页 > > 网页制作 > Javascript >

跨域

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的闭包、高阶函数、柯里化

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签