现在,大家大部分项目都是前后端分离吧,那么对于这种项目,分开部署如何通信呢?假如现在我们访问地址是:
前端地址是:http://localhost:8081 (vue+webpack+elementUI)
后端地址是:http://localhost:8080 (spring boot 项目)
一访问就跨域,今天就为大家介绍两种解决办法:

1. Nginx代理
2. 后台设置跨域

对于在这之前重来没有接触过Nginx的我,秒选第二种,但不得已,项目是中间接手,除了源码 ,其他什么都么有 ,你能想象这种痛苦吗?这些都是废话就跟大家抱怨一下,我们回到正题,解决跨域问题。

一:Nginx代理

假如我的请求格式如下:
在这里插入图片描述
细心的朋友就会疑问?你这url怎么是相对路径,这样写不好吧,当然你也可以写个全局变量,设置本地、测试、生产 不同的请求地址,然后上线的时候自行配置就可以了,就本地而例:baseUrl = http://localhost:8080/ 然后url:baseUrl+‘Auth/Login’ 这里我们就按照上图为例 这里不再啰嗦了。

安装Nginx

1.访问官网: http://nginx.org/en/download.html

2.直接解压下载文件


【喜欢输入命令的跳过这一步】解压完毕后我们不要着急运行nginx.exe文件,我们先在这个目录建立几个bat处理文件。方便我们以后快捷执行命令。直接新建一个txt文档,每个文档输入以下对应的简单的命令,然后把后缀改成bat文件即可。

  1. 退出-批处理文件
    文件名:quit.bat
    文件内容: nginx -s quit

  2. 重新加载配置-批处理文件
    文件名:reload.bat
    文件内容: nginx -s reload

  3. 启动-批处理文件
    文件名:start.bat
    文件内容: start nginx

  4. 停止-批处理文件
    文件名:stop.bat
    文件内容: nginx -s stop

如下图:
在这里插入图片描述

3.启动Nginx

启动方式有三种,如下:

  1. 双击nginx.exe文件,命令行窗口一闪而过,不要紧张,这就代表启动了
  2. 使用cmd命令行,进入到对应的nginx目录,输入命令 start nginx
  3. 双击start.bat文件,命令行窗口也是会一闪而过……

打开你的浏览器,输入地址: http://localhost 如果出现以下画面,就代表成功启动啦

在这里插入图片描述

当然如果没有出现该画面,就要检查一下自己电脑的80端口是否被其他应用占用,如果要关闭nginx的小伙伴们可以输入命令:nginx -s quit 或者 nginx -s stop 进行关闭,当然写了bat处理文件的童鞋们,也只可以直接双击对应的bat文件进行关闭。

\

4.设置代理

成功启动了Nginx,那么我们接下来就开始配置Nginx的反向代理了。打开conf文件夹,打开nginx.conf 的配置文件。
在这里插入图片描述

然后你会看到一大堆配置内容以及注释掉的配置项,对于原先的配置文件我们先不要理会 找到 http{} 里面的第一个server 然后设置代理:(万般联系原项目方,原项目方给的解决办法)

在这里插入图片描述
图中的意思是这样的,监控8081端口,转发到 / 里面 结果 localtion /没有转发到任何地址
很尴尬,这种方式不行,万般思考后,得到如下配置:

server{
	listen: 80                                                     #监听的端口
	server_name: localhost                                         #ip地址
	
	location / {                                                   #监听80端口,所有请求都转发到8081的前端地址
			root: 	html;
			index   index.html  index.htm;
			proxy_pass  http://localhost:8081;                     #前端地址
	}
	
	localtion /Auth {                                              #配置后台数据的接口 所有/Auth的请求都转发到后台地址
				proxy_pass  http://localhost:8080;                 #后端地址
	}

}

然后保存,关闭nginx.conf文件

注意:
这里并不是只有/Auth(我们请求太多怎么玩) 你可以添加统一的前缀,如: /api (设置参数 baseUrl=’/api’ 然后请求的地方都加上 baseUrl) 这里以 ‘/Auth’ 为例;
如果还是不行的话,就要看看logs下边的日志文件 另寻答案了
这样 我们输入前端地址 http://localhost:8081 然后触发访问后端接口的事件,这样我们就解决前后分离的跨域问题了。

二:后台设置跨域、

至于这种解决方案,就不详细解答了 在这为大家奉上一篇解决办法
https://blog.csdn.net/u011526234/article/details/79711721

三:加油吧,朋友

感想:在这没有搞过这个事情的时候 感觉有点困难,当你仔细去找办法解决的时候,其实也就那样,很简单的,所以,只要多努力点 没有什么办不了,正所谓:天下无难事 只怕有心人

Logo

前往低代码交流专区

更多推荐