跨域的解决措施

80 阅读2分钟

跨域限制的理解

在了解什么是跨域的时候,我们首先要了解一个概念,叫"同源策略"(跨域是浏览器做出的限制)

同源策略/SOP(Same origin policy)是一种安全策略,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSRF等攻击。所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源。

同源策略是一个重要的安全策略,它用于限制一个的文档或者它加载的脚本如何能与另一个源的资源进行交互

源:Web 内容的用于访问它的 URL 的方案(协议)、主机名(域名)和端口定义。只有当协议、主机和端口都匹配时,两个对象才具有相同的源。

image.png

解决跨域方案

一、JSONP

实现原理:主要是利用动态创建script标签请求后端接口地址,然后传递callback参数,后端接收callback,后端经过数据处理,返回callback函数调用的形式,callback中的参数就是json

二、通过代理的方式(前端代理和后端代理)

前端代理是在vue中的vue.config.js里面配置一个proxy属性,里面有个target属性指向跨域链接,修改完重启项目就可以了。实际上就是启动了一个代理服务器,绕开同源策略,在请求的时候,通过代理服务器获取到数据再转给浏览器

三、CORS

CORS全称叫跨域资源共享,主要是后台工程师设置后端代码来达到前端跨域请求的

注:现在主流框架都是用代理和CORS跨域实现的