1、同源策略

当两个服务器的 源 不完全相同的时候，无法获取另一个的数据。不同的页面，无法相互访问数据。

1.1 获取网站的源

  1. window.origin
  2. 或
  3. location.origin

1.2 判断源是否相同

源 = 协议 + 域名 + 端口号

当协议、域名、端口号（完全一致）才是同源，否者都为不同源 http://baidu.com 与 http://www.baidu.com 不同源 http://baidu.com 与 http://qq.com 不同源

2、跨域

为了解决同源策略无法相互访问数据

其中两种跨域的方法：CORS、JSONP

2.1 CORS

在后端设置响应头，提前声明允许谁获取数据。

  1. response.setHeader("Access-Control-Allow-Origin", "允许的源地址，例如（http://baidu.com）")

优点：操作简单 缺点：不兼容IE 6 7 8 9

2.2 JSONP

将数据写入到JS文件中，利用引用JS文件，将数据保存到window上。最后再利用window来获取JS保存的数据。

优点：兼容IE、可以跨域 缺点：因为是通过js的script获取的，所以他不支持post，只可以发get请求。以及没有AJAX那样获取精确的状态码等数据。

2.3 服务器中转

使用自己的服务器作为中转站，将需要请求的地址，发送给服务端。服务端不存在跨域问题，可以直接请求数据。返回给我们自己。

中转服务器

  1. const http = require('http')
  2. const url = require('url')
  3. http.createServer((req, res) => {
  4.   let urlObj = url.parse(req.url, true)
  5.   if (urlObj.pathname === '/bridge') {
  6.     http.get(urlObj.query.url, req => {
  7.       let text = ''
  8.       req.on('data', data => text += data)
  9.       req.on('end', () => {
  10.         res.setHeader('Access-Control-Allow-Origin', '*')
  11.         res.end(text)
  12.       })
  13.     })
  14.   } else {
  15.     res.writeHead(404, 'Not Found')
  16.     res.end('not found')
  17.   }
  18. }).listen(8080)

浏览器正常请求即可

  1. fetch('http://localhost:8080/bridge?url=' + encodeURIComponent('http://baidu.com'))
  2.   .then(res => res.text())
  3.   .then(data => console.log(data))

3、JSONP封装

3.1 方案1

  1. function jsonp(url) {
  2.     return new Promise((resolve, reject) => {
  3.         const random = 'JSONCallbackName' + Math.random()
  4.         window[random] = data => {
  5.             resolve(data)
  6.         }
  7.         const script = document.createElement('script')
  8.         script.src = `${url}?callback=${random}`
  9.         script.onload = () => {
  10.             script.remove()
  11.         }
  12.         script.onerror = () => {
  13.             reject()
  14.         }
  15.         document.body.appendChild(script)
  16.     })
  17. }
  18. jsonp('访问数据的文件地址').then((data) => {
  19.     console.log(data)
  20. })

3.2 方案2

服务端

  1. const http = require('http')
  2. const url = require('url')
  3. http.createServer((req, res) => {
  4.   let urlObj = url.parse(req.url, true)
  5.   if (urlObj.pathname === '/getWeather') {
  6.     let data = { city: 'guangzhou', weather: 'sunny' }
  7.     res.end(`${urlObj.query.callback}(${JSON.stringify(data)})`)
  8.   } else {
  9.     res.writeHead(404, 'Not Found')
  10.     res.end('not found')
  11.   }
  12. }).listen(8080)

客户端

  1. function jsonp(url, data = {}) {
  2.   return new Promise((resolve, reject) => {
  3.     window.__jsonp__ = data => resolve(data)
  4.     let script = document.createElement('script')
  5.     let query = Object.entries(data).map(a => `${a[0]}=${a[1]}`).join('&')
  6.     script.src = url + '?callback=__jsonp__&' + query
  7.     script.onerror = () => reject('加载失败')
  8.     document.head.appendChild(script)
  9.     document.head.removeChild(script)
  10.   })
  11. }
  13. jsonp('http://api.layouwen.com/getWeather.php', { city: '广州' }).then(data => {
  14.   console.log(data)
  15. }).catch(e => console.log(e))