nginx监听转发解决vue axios跨域问题

在前后端分离开发过程中遇到了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确实入门有些繁琐，但是一上手，快乐你想象不到