跨域.md

何为同源

协议、域名、端口号都一致

link/img/css/script/iframe 加载第三方资源不会被限制跨域

跨域方案

修改本地host

服务器部署不需要跨域，修改本地host模拟同源环境，骗过浏览器

JSONP

原理：利用script标签没有跨域请求限制的特点，向服务器发送请求，同时将本地一个函数传递给服务器

客户端

<script src="http://127.0.0.1:xxx/list">
    window.fn = function(data){
        ...
    }
</script>

服务端

// http://127.0.0.1:xxx/list 接口返回一个包含了数据的字符串
'fn({error:0, data:{/* 数据内容 */}})'

而服务器返回数据时，拼成函数字符串+数据字符串返回。因此 JSONP 方案一定需要服务器端的支持

缺陷：

1. 必须要服务器端做对应的支持
2. script等都是资源文件请求，都是 GET 请求，无法实现 POST 请求
3. 安全性不好，黑客可以做拦截，并返回木马程序在客户端执行

现实意义：

1. React 中子组件改变父组件属性，子组件中通过回调函数的方式通知父组件改变属性的方式，原理与 JSONP 类似
2. 混合开发中，H5 嵌入 IOS 端的页面里，通信时使用伪协议，并将 H5 里要执行的函数通过callback传递过去，IOS 通过拦截请求，执行 JS 函数，原理也与 JSON 类似。

CORS跨域资源共享

原理：客户端设置允许携带cookie；服务端设置头信息，写入允许的请求源

缺陷：只能设置一个源，但若设成*会造成安全问题，且不允许携带cookie。不能同时设置源为*和携带cookie

处理：从请求头中获取orgin，使用中间件设置orgin，就可以保证携带cookie且支持多个客户端地址访问

为什么HTTP跨域时要发送options请求

跨域请求之前的预检查，判断服务端是否支持请求方法，由浏览器自行发起，无需人为干预

webpack中配置本地Proxy代理请求中转

在webpack中配置 devserver，本地启动一个web服务

Nginx反向代理

Nginx本地反向代理，线上正向代理

postMessage

H5 和 APP 通信

不同页面间通信

socket协议

实时通信协议，客户端可以和服务器建立长连接

document.domain + inframe

只能实现同一个主域名下，不同子域之间的通信

window.name + inframe

location.hash + inframe

网络请求的方式和框架

ajax

$.ajax

axios

fetch

ajax/$.ajax/axios/fetch的对比

ajax：四步操作

$.ajax：基于回调封装

axios：基于 Promise 封装；拦截器的使用：发送和接收前做一层拦截

fetch：浏览器内置函数，与ajax不同。基于 Promise 管理。无论服务器返回状态码是多少，都按Promise成功状态来处理，即只要服务器返回结果就算成功。

fetch(url).then(response=>{return response.json()}).then(res => console.log(res))

ajax的核心操作

$.ajax的封装

axios的封装

axios的二次配置

fetch的处理和封装