前端跨域解决方案

目录

  • 同源政策
  • 跨域
  • 常见的跨域场景
  • 跨域解决方案
    • 1. JSONP跨域
      • 1). 原生JS实现
      • 2)jquery Ajax实现
      • 3)Vue axios实现
      • 后端node.js代码
    • 2. 跨域资源共享(CORS)
      • 1) 简单请求
      • 2) 非简单请求
      • 3) CORS跨域示例
    • 3. Vue的proxy跨域
    • 4. Node代理服务器解决跨域
    • 5. nginx代理跨域
      • 1)nginx配置解决iconfont跨域
      • 2)nginx反向代理解决跨域
    • 6. postMessage方式
    • 7. WebSocket协议跨域
    • 8. iframe系列
    • 小结

同源政策

  1. 如果两个页面拥有相同的协议、域名和端口,那么这两个页面就属于同一个源,其中只要有一个不相同,就是不同源。即便两个不同的域名指向同一个ip地址,也非同源。
    http://www.example.com:8080/dir/page.htmlhttp://www.example.com/page.html不跨域
    http:协议
    www:子域名
    example:主域名
    8080:端口号(http默认8080)
    同源策略限制以下几种行为:
  • Cookie、LocalStorage 和 IndexDB 无法读取
  • DOM和JS对象无法获得
  • AJAX 请求不能发送

跨域

在前端领域中,跨域是指浏览器允许向服务器发送跨域请求,从而克服Ajax只能同源使用的限制。

跨域报错
在这里插入图片描述

常见的跨域场景

URL 说明 是否允许通信
Website Domain Names, Online Stores & Hosting - Domain.coma.js Website Domain Names, Online Stores & Hosting - Domain.comb.js Website Domain Names, Online Stores & Hosting - Domain.comlab/c.js 同一域名,不同文件或路径 允许
http://www.domain.com:8000/a.js http://www.domain.com/b.js 同一域名,不同端口 不允许
http://www.domain.com/a.js https://www.domain.com/b.js 同一域名,不同协议 不允许
http://www.domain.com/a.js http://192.168.4.12/b.js 域名和域名对应相同ip 不允许
http://www.domain.com/a.js http://x.domain.com/b.js http://domain.com/c.js 主域相同,子域不同 不允许
http://www.domain1.com/a.js http://www.domain2.com/b.js 不同域名 不允许

跨域解决方案

1. JSONP跨域

jsonp的原理就是利用

你可能感兴趣的:(学习,前端)