nginx一文解决vue部署跨域问题

平时我们在使用如vue等诸如此类的前端框架时，难免会回到跨域问题。在本地运行项目时，我们使用axios解决跨域问题。可是当我们部署到服务器上时，则会发现我们前台请求的地址404了，555…，头都整痛了，最后结合网上的教程和请教了一位大佬朋友，终于解决了这个问题。

下面让我们来解决这个恼人的问题吧，使用nginx反向代理解决此问题：

1.到nginx官网，如下图所示：

2.选择其中一个版本，下载即可

3.解压下载好的压缩包，找到conf文件夹下的nginx.conf：

我们在这里做一个简单的配置

server {
    listen       8000;  #浏览器访问的端口号
    server_name  49.233.189.179;   #服务器IP地址 
    
	location /index {
		proxy_pass http://49.233.189.179:8080/Pleasure/dist;    #服务器项目地址
		root   html;
        index  index.html index.htm;
    }
	
    location /index/api {
		proxy_pass  http://api.avatardata.cn/; #当访问中有api时，则访问这个我们需要跨域的地址
    }
}

修改完之后保存即可。

4.启动nginx

启动命令行，cd到如下图目录：

如果为启动，则用start nginx : 启动nginx即可；
如果已经启动了，则nginx -s reload ：修改配置后重新加载生效。

5.访问

接下来我们访问 http://49.233.189.179:8000/index 就可以啦。

6.demo地址

奉上我的demo，还在持续更新中，希望小伙伴们多多指教，提出你们宝贵的建议，demo如下图所示：

7.nginx部署纯前端项目（不需要则自行忽略）

昨天以为朋友在我的博客下留言道，如果是纯前端项目，部署到nginx上即可，大可不必安装配置Tomcat这么麻烦。于是我将它记录到这里。

首先vue项目中的配置还是不用变，详情参考我的上一篇博客手把手教小白部署vue教程，然后将生成的dist下的全部文件拷贝到nginx目录下的webapp下，如果没有，自行创建即可。

接下来我们改nginx目录中的conf/nginx.conf文件：

 server {
    listen       8000;  #浏览器访问的端口号
    server_name  49.233.189.179;   #服务器IP地址 
    
	location / {
		root   webapp;
		index  index.html index.htm;
    }
}

最后我们访问 http://49.233.189.179:8000/ 就可以了。

8.说明

当然nginx的作用远不止如此，还有很多东西需要我们去学习。以上为小白本人记录解决此问题的方法，如有好的建议或者更好的途径，都可以私信我的邮箱2698256011@qq.com。希望我们共同努力，一起加油！