CORS & JSONP 学习笔记一

什么是跨域?

首先,现代浏览器为了安全,做了一个同源限制.

也就是所谓的同源安全策略.

本质上,其实是不存在所谓的跨不跨域的.
把浏览器想象成一个发送网络请求的软件.
按照道理来说,请求都是可以发送出去的.
但是在 web 端,浏览器里,这么做的就不合适.
如果网络上的接口可以不受限制的被任意人调用.
那将是一个非常混乱的场景.
所以,为了防止这种情况,浏览器做了这个同源策略来防止这种情况发生.
对,一般服务器不管这个事情.

跨域指的是,A网站内部向B网站发送一个AJAX请求.

由于浏览器有同源策略的限制,默认情况下,是不允许 A网站向 B 网站请求数据资源的.

http://my.website.com/ ---> http://your.website.com/ 是不允许的.

具体来说,凡是发送请求中,协议,主机名,端口号 有一个不同,即为跨域请求.

上述例子:my.website.com 和 your.website.com 就属于主机名不同而导致的跨域.

具体可以参照下面这个表.

image.png

总结一句:

协议相同 + 域名相同 + 端口号相同

浏览器才认为是同一个网站.
才不同受到同源策略的影响.
才可以正常的发送 AJAX 请求.

其他情况下,发送 AJAX 请求,都属于跨域.

请注意: 这里说的是 XMLHttpRequest 下的 AJAX 请求.

对于 <img> , <script>, <link> 等标签,就不存在跨域请求.(除非对方后台做了防盗链)

继续补充:

所谓的同源策略是浏览器实现的,而和后台服务器无关.
A 发送请求到 B. 请求实际上是发送到了 B 后台, B后台接受到数据后.
其实也有返回.
只不过,这个数据返回到浏览器之后,浏览器把这个数据给劫持了.不让A网站使用.

为什么要跨域?

既然跨域这么麻烦,都不能从网站后台拿到数据,那为什么还要搞跨域呢?

因为当一个项目变大时,把所有的内容都丢在一个网站或者是后台服务器中是不现实的.

比如:

一个网站体量很大.有很多可以独立且复杂的业务

比如有一个订单管理的后台数据API网站服务.
比如有一个用户管理的后台数据API网站服务.
比如有一个新闻管理的后台数据API网站服务.

最后剩下的就是web的UI层面的东西.

把这个UI层面的东西和哪个数据服务API的网站集成在一起比较合适呢?

都不适合.

它应该是一个专门的网站.

image.png

所以域名可能存在如下情况:

主网站(UIWeb)域名为: http://www.relax.com/
订单数据服务接口域名为: https://order.relax.com/orderList
用户数据服务接口域名为: https://users.relax.com/userList
新闻数据服务就扣域名为: http://news.relax.com/newList

所以,UIWeb 如果需要请求这数据.

请求订单数据: 协议不同 https|http , 二级域名不同 order | www , 端口号不同 443|80 --> 跨域
请求用户数据: 协议不同 https|http , 二级域名不同 users | www , 端口号不同 443|80 --> 跨域
请求新闻数据列表: 协议相同 http|http , 二级域名不同 order | www , 端口号相同 80|80 --> 跨域

不管请求哪个后台服务器的数据,都存在跨域的情况.

也就是无法利用 ajax 异步的获取到数据内容.

利用 jsonp 进行跨域

jsonp 跨域是里用在浏览器中,下载一个script标签是不受同源策略限制的特性.(bootcdn中不是有很多的js文件下载吗?)

具体实现原理大概分下面几步

客户端动态的创建一个 script 标签
设置 script 标签的src 为跨域的服务器后台.
src 中需要带一个 callback 查询字符串,告诉后台,前端提供的方法名是什么.
然后后端,直接返回一一串 callback(data) 的字符串给浏览器即可.

前端端口是:8080

button.addEventListener('click', function () {
    // 利用下载script标签是不存在浏览器同源策略的特点.
    const scriptTag = document.createElement('script')
    scriptTag.type = 'text/javascript'
    // 第一 22222 端口号不同.
    // 第二 callback=show 是传递给22222后台服务器的查询字符串参数.
    // 第三 后台服务器根据拿到了这个callback = show,往前端输出一些文本流.(这里就是和利用下载script标签一模一样.)
    scriptTag.src = 'http://localhost:12345/getUserinfo?callback=show'
    document.body.appendChild(scriptTag)
  },false)

  // 这里的show 方式就是上述 jsonp 中的 callback 查询字符串指定的值.
  function show (user) {
    let dataStr = ""
    for(let prop in user) {
      dataStr += prop  + ":" + user[prop] + "<br>"
    }
    unOriginPlaceHolder.innerHTML = dataStr
  }

后端端口是:12345

const app = require('express')()
const url = require('url')
const queryString = require('querystring')

app.get('/getUserInfo', (request, response) => { 
  const queryObj = url.parse(request.url, true).query
  const callback = queryObj.callback // 获取callback参数

  const data = {
    userid: 1,
    name: '李四',
    age: 22,
    profession: '软件工程师'
  }

  const objStingIfy = JSON.stringify(data)
  console.log(objStingIfy)
  
  // 拼接 callback(数据) 字符串,返回给前端
  response.end(`${callback}(${objStingIfy})`)

})

app.listen(22222, () => { 
  console.log('服务启动成功!')
})

结果: