Vue中咱们能够作哪些事来解决跨域

[Talk is cheap. Show me the code]

前言

前端开发中不可避免的会遇到种种跨域问题，本文旨在简单讲述跨域问题的产生以及咱们常见的解决方法（不想看理论知识，请直接跳转到最后Vue相关）。须要注意的是前端是没有办法从根本上解决跨域问题的，但愿读完本文能对你有所帮助。

跨域问题的产生

由于浏览器的安全机制（同源策略）会对不一样域名下的文件读取进行限制，若是两个资源的协议、端口、主机是相同的即表明两个资源同源。当先后端资源协议、端口、主机不一时就表明两个资源非同源，前端访问后端资源时就会出现跨域问题。

解决思路

01.禁用浏览器安全检查

既然跨域问题是因为浏览器的安全机制存在，那咱们禁用掉安全机制检查不就行了嘛，固然这种操做只能是在开发环境中使用，毕竟不可能禁用全部用户的安全检查机制。生产环境将先后端项目打包在一个服务器上便可。 配置以下：
在Chrome浏览器属性--目标中配置

--args --disable-web-security 
复制代码

02.使用JSONP跨域

jsonp解决跨域的原理在于，ajax自己是不能够跨域的，可是jsonp利用来script能够访问跨域资源的特色，好比咱们能够经过CDN的方式引入外部的资源库如ElementUI

<script src="https://unpkg.com/element-ui/lib/index.js"></script>
复制代码

利用script来访问跨域资源，并在script连接尾部包装一个callback回调函数，当咱们访问这个资源地址时会执行这个callback函数，后台服务器在接收到这个回调函数时，将服务端数据包裹在callback的参数中返回给客户端，因而跨域的问题就解决了，如jqery中$ajax的datatype：jsonp就是利用了jsonp的特性来解决跨域问题。可是这种方法已经不多在使用了（存疑，不过我的的开发经历几乎没有遇到这种方法了），由于jsonp须要后台改动代码才能够实现跨域。

03.其余方式

iframe嵌套通信、window.name、window.postMessage、服务器上设置代理页面，nginx 反向代理等（nginx 服务内部配置 Access-Control-Allow-Origin：*）实际开发中前端也不多遇到这些状况，因此再也不展开讲述。

Vue中咱们能够作哪些处理

利用webpack配置解决跨域：

在config--index.js中将proxyTable对象新增到配置中，其实这一步就能够解决跨域了 在target中配置你的开发环境IP，配置以后须要重启你的项目

在config--dev.env.js中新增一个baseURL:"'apis'"

在axiso实例建立中添加一个baseURL参数 baseURL 将自动加在 url 前面，除非 url 是一个绝对 URL。 它能够经过设置一个 baseURL 便于为 axios 实例的方法传递相对 URL

因而这三种就产生了联系，这样就解决了前端的跨域问题，并解决了options预请求，固然这种解决方法只适用于开发环境。

若是有任何关于本文的意见，欢迎在文章下方留言，我会在看到的第一时间回复。