如何解决vue项目(cli3以上)中的跨域问题(axios版)

如何解决vue项目(cli3以上)中的跨域问题(axios版)

今天在写项目的时候突然网络请求发送不出去，一看是出现了跨域问题，如下图。

要想解决这个问题，我们必须先了解什么是跨域，当然你想直接看解决方法可以直接下滑拉。

什么是跨域？

跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。

这里说明一下，无法跨域是浏览器对于用户安全的考虑，如果自己写个没有同源策略的浏览器，完全不用考虑跨域问题了。是浏览器的锅，对。

同源策略限制了一下行为：

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

什么是浏览器同源策略？

同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说 Web 是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

它的核心就在于它认为自任何站点装载的信赖内容是不安全的。当被浏览器半信半疑的脚本运行在沙箱时，它们应该只被允许访问来自同一站点的资源，而不是那些来自其它站点可能怀有恶意的资源。

所谓同源是指：域名、协议、端口相同。

举个栗子：如下，相对于http://www.beiebi.cn/home/index.html的同源检测结果

URL	结果	原因
http://www.beiebi.cn/person/index.html	成功	域名，协议，端口都相同
https://www.beiebi.cn/home/index.html	失败	协议不同
http://www.beiebi.cn:8080/home/index.html	失败	端口不同
http://www.beiebi.com/home/index.html	失败	域名不同

如何解决跨域呢？

我们这里使用的是服务器代理的方法

浏览器有跨域限制，但是服务器不存在跨域问题，所以可以由服务器请求所要域的数据再返回给客户端

在二次封装的axios里面将 baseUrl修改

axios.defaults.baseURL = “/api”

然后在vue.config.js（没有的在项目根目录下自己建一个）配置代理，将你真正想要访问的域名放在target里面

module.exports = {
	devServer: {
		proxy: {
			"/api": {
				// 此处的写法，目的是为了 将 /api 替换成 你想要访问的域名
				target: "http://www.beibei.com/home",
				// 允许跨域
				changeOrigin: true,
				pathRewrite: {
					"^/api": "",
				},
			},
		},
	},
}

然后就可以正常的发送请求，获取数据了

axios如何二次封装看我另一篇博客 vue中axios的二次封装