跨域
不同协议、不同URL、不同端口号都会产生跨域
解决跨域的方案:
postMessage:web worker、iframe
Jsonp:用script标签请求地址,标签可以跨域
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210303104156169.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzA1OTU4,size_16,color_FFFFFF,t_70)
cors: 服务端设置响应头信息,允许跨域
1、最常见用cors处理跨域![在这里插入图片描述](https://img-blog.csdnimg.cn/20210303104207323.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzA1OTU4,size_16,color_FFFFFF,t_70)
2、如果使用非简单请求,比如PUT和DELETE或者Content-Type字段的类型是application/json
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210303104214498.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzA1OTU4,size_16,color_FFFFFF,t_70)
document.domin + iframe: 设置同源
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210303104229196.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzA1OTU4,size_16,color_FFFFFF,t_70)
代理:
1、使用webpack-devService![在这里插入图片描述](https://img-blog.csdnimg.cn/20210303104239877.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzA1OTU4,size_16,color_FFFFFF,t_70)
2、使用nginx反向代理
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210303104247386.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzA1OTU4,size_16,color_FFFFFF,t_70)
socket.io:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210303104256254.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzA1OTU4,size_16,color_FFFFFF,t_70)
![在这里插入图片描述](https://img-blog.csdnimg.cn/2021030310430533.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzA1OTU4,size_16,color_FFFFFF,t_70)