在前后端分离开发过程中遇到了axios的跨域问题,看了几百篇文章,方法试了无数种,比如设置response.setheader,比如更改在配置文件下更改dev{proxy:{}}生产开发环境,还有就是谷歌插件,设置浏览器安全级别等等等等。
面对我的是一万个巨坑,在无数次失败之后,我终于找到了简单又快速的方法。
那就是nginx监听转发。话不多说,教程如下:
1.下载nginx服务器。网上自行搜索
2.解压后配置conf文件下的nginx.conf 文件
server{
listen 8000;
server_name 127.0.0.1;
location /{
proxy_pass http://127.0.0.1:8080;
}
location /api{
proxy_pass http://127.0.0.1:80/;
}
}
将server中的配置改成上图。这个配置的意思是,你请求127.0.0.1:8080/为前缀的url时 时,nginx服务会监听到你的请求,并对应转发到127.0.0.1:8000端,你请求127.0.0.1:80/api为前缀的接口时,nginx会监听到你的请求同样转发到127.0.0.1:8000,这样请求与响应都在8000端口进行,这样就解决了跨域的问题。
this.$axios.get('http://localhost:8000/api/test/test1').then(res => {
this.msg=res.data.haha;
}).catch(function(err) {
if (err.response) {
}
});
请求 /api 8000端口 nginx服务器会转发到80端口
在浏览器访问127.0.0.1:8000/ url nginx服务器会帮你转发到8080端口
好啦,可以愉快的前后端分离开发啦!vue确实入门有些繁琐,但是一上手,快乐你想象不到