Nginx配置前后端分离项目代理--解决跨域问题

最近刚接触到前后端分离项目，遇到跨域问题，想到使用Nginx反向代理可以解决，于是查了一些资料，简单地设置了一下。

我的项目前端是vue.js，后端是springboot+SSM。
当然，这个配置跟使用了什么项目无关，仅跟两个项目各占用的端口有关。

一、Nginx下载

前往Nginx官网 http://nginx.org/下载压缩包。

在Windows平台下，选择Windows版本，下载后解压打开：

添加代理配置的文件为：/conf/nginx.conf。使用Notepad++或其他编辑器打开进行编辑即可。

二、分别添加前后端项目代理配置

下面介绍一下如何添加前后端代理的配置：
首先，默认vue.js项目启动会占用8080端口，而SpringBoot项目配置如下：

server:
  port: 8090
  servlet:
    context-path: /api

那么，我们在Nginx中修改配置如下：

三、启动Nginx代理与项目

Nginx相关的命令，如下（首先需要进入nginx解压后的目录）：

start nginx 或 nginx.exe // 启动
nginx.exe -s stop 或 nginx.exe -s quit // 关闭nginx，前者为迅速关闭，后者为保存信息再关闭
nginx.exe -s reload // 重新载入nginx，配置信息被修改时使用
nginx.exe -s reopen // 重新打开日志文件
nginx -v // 查看版本

使用命令nginx.exe启动Nginx
分别启动前后端项目，在浏览器输入http://localhost:8999，网页正确打开：

四、使用Nginx后访问慢的问题

之前在配置信息中使用的server是localhost，打开网站时发现速度特别慢（几十秒钟）。查了一些资料，原因是hosts文件没有配置localhost指向127.0.0.1这个本机ip。
解决办法就是像我上面的配置一样，把localhost改成127.0.0.1即可。

注：从问题原因看，修改主机上关于localhost的配置应该也是可以解决这个问题的。我尝试了一下，没有效果（不知道是不是需要重启系统才行）。

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/qq_28379809/article/details/86532753
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2020-02-29 21:25:51

阅读 ( 1932 )