vue-解决跨域问题

核心要点

• 什么是跨域？
• 同源策略是什么？
• 同源策略限制什么行为？
• 有哪些解决跨域的方法？

1、什么是跨域？

• 指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全制

2、同源策略是什么？

• 是指协议，域名，端口都要相同，其中有一个不同都会产生跨域

3、同源策略限制什么行为？

• Cookie、LocalStorage 和 IndexDB 无法读取、DOM 和 JS 对象无法获取、Ajax请求发送不出去

4、有哪些解决跨域的方法？

• Jsonp： 原理是利用script的src标签没有跨域限制；具体执行方式是，①⑤前端定义一个解析函数，例如 jsonpCallback=function（res）{}，②通过params的形式包装script的请求参数，并且声明执行函数（如 cb=jsonpCallback）， ③后端获取到前端声明的执行函数（jsonpCallback），并以携带参数并且调用执行函数的方式传递给前端 ，④前端在script标签返回资源的时候就回执行jsonpCallback，并以回调函数的方式拿到返回的数据了；缺点：只能进行get请求，优点：兼容性好，在一些老的浏览器中也可以运行
• CORS： （Cross-Origin Resource Sharing，跨域资源共享）是一个系统，它由一系列传输的HTTP头组成，这些HTTP头决定浏览器是否阻止前端 JavaScript 代码获取跨域请求的响应CORS 实现起来非常方便，只需要增加一些 HTTP 头，让服务器能声明允许的访问来源，只要后端实现了 CORS，就实现了跨域
• Proxy： 代理（Proxy）也称网络代理，是一种特殊的网络服务，允许一个（一般为客户端）通过这个服务与另一个网络终端（一般为服务器）进行非直接的连接；一些网关、路由器等网络设备具备网络代理功能；浏览器是禁止跨域的，但是服务端不禁止，vue 在本地运行npm run dev等命令时实际上是用node运行了一个服务器，因此proxyTable实际上是将请求发给自己的服务器，再由服务器转发给后台服务器，做了亦曾代理，因为不会出现跨域问题