我要评论在vue2的开发过程中跨域问题肯定是前端程序员都遇到过的问题，尤其还是像我这种半吊子前端，报错内容如下：
ccess to xmlhttprequest at 'http://localhost:8080/xxxxxxxx' from origin 'http://localhost:8081' has been blocked by cors policy: no 'access-control-allow-origin' header is present on the requested resource.
get http://localhost:8080/xxxx net::err_failed 200 (ok)
uncaught (in promise) error: network error
等等之类的都是跨域问题报错，接下来看看如何解决：
首先看main.js文件：
在main.js文件中添加：
import axios from 'axios'
axios.defaults.baseurl = '/api'
axios.defaults.headers.post['content-type'] = 'application/json'
接下来再看vue.config.js文件，没有就自己创建一个，但是一般都会有，名字不能错
其主要添加devserver如下：
devserver: {
host: '0.0.0.0', //可以忽略不写
port: 8081,//它是用来修改你打开后的端口号的
open: true,//值为 true的话，项目启动时自动打开到浏览器里边， false不会打开
proxy: {
'/api': {
target: ' http://localhost:8080/',//换成你自己项目的开发或者生产地址
ws: false, //也可以忽略不写，不写不会影响跨域
changeorigin: true, //是否开启跨域，值为 true 就是开启， false 不开启
pathrewrite: {
'^/api': ''//注册全局路径， 但是在你请求的时候前面需要加上 /api
}
}
}
}添加后效果如下：
其原理大致就是我刚刚添加了axios.defaults.baseurl = '/api'，其每次发送请求都会加一个/api的前缀，这里拦截器拦截api前缀后将其替换为 target。
接下来看axios请求：这里随意写了一个钩子函数：
看看效果jke
可以看到请求成功，没有跨域报错了。 前端之路学习慢慢，之后继续分享实际工作中遇到的问题以及解决方案，觉得有用就点个赞！！！！
发表评论