­

以JSONP触发的知识点

  • 2019 年 10 月 10 日
  • 筆記

JSONP由两部分组成:回调函数和数据。即把JSON数据包在一个回调函数callback里。

一、跨域

1、同源策略

同源指:协议+域名+端口,三者统一 限制行为: 1)Cookie、LocalStorage、IndexDB无法读取 2)DOM和JS对象无法获得 3)AJAX请求无法发送

2、跨域方式

1)JSONP跨域

原理:利用<script>标签没有跨域限制的特点,发送带有callback参数的GET请求

2)nginx反代

使用proxy_pass

3)跨域资源共享CORS

浏览器向跨源服务器发出XMLHttpRequest请求 需要满足一下两个条件: (1)使用方法:head/get/post (2)请求的Header:Accept、Accept-Language、Content-Language、Content-Type:只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

4)Nodejs中间件代理跨域

原理大致和nginx类似,通过一个代理服务器,实现数据转发 (1)非vue框架:node+express+http-proxy-middleware搭建一个proxy服务器 (2)vue框架:node+vue+webpack+webpack-dev-server,修改config

5)WebSocket协议跨域