平时我们在使用如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。希望我们共同努力,一起加油!