前后端分离项目如何解决跨域问题

系统管理员 2022-03-09 10:14 536阅读 0赞

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

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

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

## 一：Nginx代理 ##

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

## 安装Nginx ##

## 1.访问官网: [http://nginx.org/en/download.html][http_nginx.org_en_download.html] ##

![70][]

## 2.直接解压下载文件 ##

![70 1][]  
【喜欢输入命令的跳过这一步】解压完毕后我们不要着急运行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

如下图：  
![在这里插入图片描述][70 2]

## 3.启动Nginx ##

启动方式有三种，如下：

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

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

![在这里插入图片描述][70 3]

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

## 4.设置代理 ##

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5fbGFuZw_size_16_color_FFFFFF_t_70]  
图中的意思是这样的，监控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][http_localhost_8081] 然后触发访问后端接口的事件，这样我们就解决前后分离的跨域问题了。

## 二：后台设置跨域、 ##

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

## 三：加油吧，朋友 ##

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

[http_localhost_8081]: http://localhost:8081
[http_localhost_8080]: http://localhost:8080
[20190312210926496.png]: /images/20220309/425439f93c8c4955a28ae4e678b34336.png
[http_localhost_8080 1]: http://localhost:8080/
[http_nginx.org_en_download.html]: http://nginx.org/en/download.html
[70]: /images/20220309/378b62f850024dea8bae85452000d7e5.png
[70 1]: /images/20220309/9470c271369442569437d27d4b4adc3f.png
[70 2]: /images/20220309/f9bdc7f145b14e358a772f35023f6831.png
[http_localhost]: http://localhost
[70 3]: /images/20220309/629da1cd22f24180a6146c3f68f0eb9a.png
[70 4]: /images/20220309/53212e9ae6194a128dc5501585220de8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5fbGFuZw_size_16_color_FFFFFF_t_70]: /images/20220309/dc5fecc01c084afcab561c9d6c511bb9.png
[https_blog.csdn.net_u011526234_article_details_79711721]: https://blog.csdn.net/u011526234/article/details/79711721