Vue前端面试题总结（二十二）如何解决跨域 ？详解

如何解决跨域 ？

如何产生跨域

产生跨域的情况有：不同协议，不同域名，不同端口以及域名和 ip 地址的访问都会产生跨域。

跨域的解决方案

Jsonp
jsonp如何解决跨域

主要是利用创建script标签后 请求后端接口地址
然后传递callback参数 后端接收callback参数
后端处理完参数 返回callba函数的调用形式
callba参数里面就是json

优点：浏览器兼容性好
缺点：只支持get请求方式

代理

通过前端代理 在vue中通过脚手架中的config 中 的index文件来配置的
其中proxytable来配置跨域

CORS

cors 全称跨资源共享 主要是后端工程师在请求的页面配置好并且支持 所有的请求方式

• cors的原理 定义一种跨域访问的机制让Ajax实现跨域访问
• cors允许一个域上的网络应用先另外一个域提交Ajax请求
• 实现这个功能只需要服务器发送一个请求头

优点：无需前端工程师设置 只要后端设置在请求页面配置好 就可以 支持所有的请求方式
缺点：对浏览器有限制