nginx一文解决vue部署跨域问题
平时我们在使用如vue等诸如此类的前端框架时，难免会回到跨域问题。在本地运行项目时，我们使用axios解决跨域问题。可是当我们部署到服务器上时，则会发现我们前台请求的地址404了，555…，头都整痛了，最后结合网上的教程和请教了一位大佬朋友，终于解决了这个问题。
下面让我们来解决这个恼人的问题吧，使用nginx反向代理解决此问题：
1.到官网，如下图所示：
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如下图所示：
7.nginx部署纯前端项目（不需要则自行忽略）
昨天以为朋友在我的博客下留言道，如果是纯前端项目，部署到nginx上即可，大可不必安装配置Tomcat这么麻烦。于是我将它记录到这里。
接下来我们改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/ 就可以了。
