同源策略和跨域方法

146 阅读1分钟

什么是同源

  • 源:在任何的网页开发者工具控制台(console)输入window.originlocation.orgin 可以得到当前的源
  • 源=协议+域名+端口号
  • 什么是同源:就是协议+域名+端口号完全一致才是同源
  • 作用: 为了保护用户隐私
  • 同源策略:不同源的页面之间,不准互相访问数据,这是浏览器自带的功能
  • 不同源之间请求数据:HTTP请求状态码是成功的,但是未得到响应拿不到数据

  • 问:为什么可以跨域使用CSS、JS和图片等? 因为同源策略限制的是数据访问,我们引用CSS、JS、和图片的时候,其实并不知道其内容,我们只是在引用

请问如何解决跨域

方法一:CORS

  • 在被分享的server.js响应头里添加这个网站(要一模一样)

response.setHeader("Access-Control-Allow-Origin", "http://frank.com:9990")

  • 缺点:不支持IE
console.log(request.headers['referer'])
获取哪个网站需要读取

方法二:JSONP(跨网站的回调)

  • JSONP的定义: 父网站将数据写到js文件中,子网站通过script标签获取js数据
  • 优点:兼容IE、 跨域
  • 缺点:
  1. 由于它是script标签,所以它拿不到状态码、拿不到header
  2. 它不支持post,只支持GET

安装node-dev自动更新重启,如果运行错误无法访问请更换端口运行

yarn global add node-dev

运行

node-dev server.js 端口