跨域

1.什么是同源

源

• window.origin或location.origin可以得到当前源

• [x] 源=协议+域名+端口号

  怎样才算是同源

• [x] 两个URL的 协议+域名+端口号 完全一致 就是同源

• 举例

  • https://qq.com 和 https://www.baidu.com 不同源
  • https://baidu.com 和 https://www.baidu.com 也不同源（只相差www也不同源，必须完全一致）

    2.什么是跨域

    由于浏览器的同源策略规定：不同源的页面之间，不准互相访问数据
    跨域：也就是让不同源之间能互相访问数据
    跨域的常用方法有：**
    CORS：支持所有类型的HTTP请求
    JSONP：兼容IE；但只支持GET请求

    3.JSONP 跨域

    首先区分JSON和JSONP，这两个虽然只有一字之差，但却是根本没关系的两个东西
    JSON是一种数据交换格式，JSONP是一种非官方跨域数据交互协议
    通俗一点讲：JSONP就是在当前网站创造一个script标签，去请求另外一个网站的JS，JS里面会夹带一些数据，然后这个数据会在我的网站上调用一个全局函数来运行（因为浏览器不会阻止JS的数据访问）

    举例：alert.com访问qq.com的friends.json数据

    第一步：新建一个friends.js文件，将friends.json数据写到friends.js里

    if (path === '/friends.js') {
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/javascript;charset=utf-8')
    const string = fs.readFileSync('./public/friends.js').toString()
    const data = fs.readFileSync('./public/friends.json').toString()
    const string2 = string.replace('{{data}}', data)
    response.write(string2)
    response.end()
    }

    第二步：alert.com用script标签引用/friends.js

    window.xxx = (data)=>{
    console.log(data)
    }
    const script = document.createElement('script') // 新建 script 标签
    script.src = 'http://qq.com:8888/friends.js' // 设置src
    document.body.appendChild(script) // 添加到 body

    然后在alert.com就能通过这个window.xxx获取到数据了（这里的xxx可以改为独一无二的随机数）
    如果需要定向访问：就在请求头添加referer

    if (request.headers['referer'].indexOf('http://alert.com:9999') !== -1)

    这样就只有http://alert.com:9999可以访问了

    4.CORS 跨域

    简介：全称：Cross-origin resource sharing（跨域资源共享）

• CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10

• 实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信

  简单请求：

  浏览器直接发出CORS请求。在头信息中添加该字段：Access-Control-Allow-Origin：url/*

  • 如果后面是*，表示都可以访问该数据
  • 是url（比如：http://foo.example），表示允许该url访问数据

要实现这种操作可以在分享数据的网站的响应头加上下面一句

response.setHeader('Access-Control-Allow-Origin', 'http://foo.example')