跨域以及跨域的方法

EVA
335 阅读2分钟

1、跨域包括的内容

同源策略

浏览器故意设计的一个功能限制

同源定义

源：window.origin或location.origin可以得到当前源的，源=协议+域名+端口号，如果两个URL的协议、域名、端口号是完全一致，那么这两个URL就是同源的

例如：qq.com、https:www.qq.com不同源；https://baidu.com、…

浏览器规定

如果JS运行在源A里，那就是只能获取源A的数据，不能获取源B里面的数据；起原因是浏览器为了保护用户的隐私

当你的QQ空间的数据能够其他网站访问里面的数据，那么QQ里面的个人信息数据都会被泄露，QQ空间网址：qzone.qq.com/黑客网址https:/… 几乎一样，浏览器怎么区分是谁发来的请求呢？可以在后台检查referer是有区别的

CORS、JSONP解决跨域问题

随意、然原则上不允许不同源相互访问数据，但是当两个网站达成协议，是可以相互访问的

CORS跨域

else if(path==='/friends.json'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/json;charset=utf-8')
    response.setHeader('Access-Control-Allow-Origin','http://localhost:9990')//用CORS方法实现跨域，在头部加上你同意被访问的URL
    response.write(fs.readFileSync('./public/friends.json'))
    response.end()

JSONP跨域

由于IE浏览器不兼容CORS,很多的程序员就想出来了JSONP,很容易误导新手，认为JSON与JSONP是差不多的，其实是一点关系也没有

  • 我们现在面临地问题是什么程序员常常面临奇葩需求
  • 没有CORS，怎么跨域
  • 记不记得我们可以随意引用JS
  • 虽然我们不能访问qq.com:8888/friends.json
  • 但是我们能引用qq.com:8888/friends.js 啊!
  • 这有什么用?JS又不是数据
  • 我们让JS包含数据不就好了……
else if(path==='/friends.js'){
    if(request.headers['referer'].indexOf('http://localhost:9990')===0){
      response.statusCode = 200;
      console.log(query.functionName)
      response.setHeader('Content-Type', 'text/javascript;charset=utf-8')
      const string = `window['{{xxx}}']({{data}})`
      const data =fs.readFileSync('./public/friends.json').toString();
      const string2 = string.replace('{{data}}',data).replace('{{xxx}}',query.callback);
      response.write(string2);
      response.end();
    }else{
      response.statusCode = 404
      response.end();
    }

frank.com访问qq.com

  • qq.com将数据写到/friends.js
  • frank.com用script标签引用/friends.js/friends.js执行，执行什么呢?
  • frank.com事先定义好window.xxx函数/friends.js执行window.xxx({frinds:[...]})
  • 然后frank.com就通过window.xxx获取到数据了window.xxx就是一个回调啊!
  • 啊啊啊这都能想到，人才啊!
  • 这是很多前端工程师一起想出来的 以上内容是我个人理解，希望对里有帮助
avatar
文章
阅读
粉丝