跨域

同源策略(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('Access-Control-Allow-Origin','http://a.com:9003')  //CORS跨域
    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>

使用Hostbuddy添加127.0.0.1的新hosts地址a.com和b.com

使用a.com:9003/index.html获取数据正常

使用b.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