同源策略

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

H}$JAA%3945MBU4R0VR883W.jpg

本域指的是?

同协议：如都是http或者https
同域名：如都是http://jirengu.com/a 和http://jirengu.com/b
同端口：如都是80端口
如:
http://jirengu.com/a/b.js 和 http://jirengu.com/index.php (同源)

不同源的例子：

http://jirengu.com/main.js 和 https://jirengu.com/a.php (协议不同)
http://jirengu.com/main.js 和 http://bbs.jirengu.com/a.php (域名不同，域名必须完全相同才可以)
http://jiengu.com/main.js 和 http://jirengu.com:8080/a.php (端口不同,第一个是80)

需要注意的是: 对于当前页面来说页面存放的 JS 文件的域不重要，重要的是加载该 JS 页面所在什么域,也就是指当前js执行环境所在页面的url,而不是指js文件的地址,当前页面的url和ajax请求的url能对上号才可以.

12384531.jpg

报错范例:

给host文件添加记录

127.0.0.1 a.com
127.0.0.1 b.com

假设访问a.com,b.com 时候相当于访问本机,借此实现一个场景.浏览器是a.com,接口是b.com.虽然对应的都是本机可域名并不一样.

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)
  console.log(pathObj)
  switch (pathObj.pathname) {
    case '/getWeather':
      res.end(JSON.stringify({
        beijing: 'suny'
      }))
      break;
    default:
      fs.readFile(path.join(__dirname, pathObj.pathname), function (e, data) {
        if (e) {
          res.writeHead(404, 'not found')
          res.end('<h1>404 Not found</h1>')
        } else {
          res.end(data)
        }
      })
  }
}).listen(8080)

<!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>Document</title>
</head>

<body>
  <h1>hello world</h1>
  <script>
    var xhr = new XMLHttpRequest()
    xhr.open('GET', 'http://b.com/getWeather', true)
    xhr.send()
    xhr.onload = function () {
      console.log(xhr.responseText)
    }
  </script>
</body>

</html>