nginx解决vuejs与springboot跨域问题

老白的释然

问题

在实施前后端分离的时候，vuejs与springboot通常不在同一台服务器，这个时候，vuejs调用springboot的时候通常会出现跨域问题。

解决思路

这里的解决方案，主要是通过nginx搭建一个静态文件服务器，然后，再在此基础上面启用nginx的反向代理功能，反向代理springboot的rest接口服务即可。

nginx.conf

1. # 启动多worker进程
   
2. worker_processes  auto;
   
3. events {
   
4.     worker_connections  1024;
   
5. }
   
6. http {
   
7.     include       mime.types;
   
8.         # 假装配置springboot服务集群
   
9.         upstream myspringboot {
   
10.         server 127.0.0.1:8081;
    
11.     }
    
12.     default_type  application/octet-stream;
    
13.     # 日志格式
    
14.     log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    
15.                       '$status $body_bytes_sent "$http_referer" '
    
16.                       '"$http_user_agent" "$http_x_forwarded_for"';
    
17.     sendfile        on;
    
18.     keepalive_timeout  65;
    
19.     # 启用gzip压缩
    
20.     gzip  on;
    
21.     server {
    
22.         # nginx服务器对外8080端口
    
23.         listen       8080;
    
24.         server_name  localhost;
    
25.         # 日志输出
    
26.         access_log  logs/myvuejs.access.log  main;
    
27.         # vuejs静态文件配置
    
28.         location / {
    
29.             root myvuejs;
    
30.             index  index.html index.htm;
    
31.         }
    
32.         # 反向代理springboot接口服务
    
33.         location /api/springboot/ {
    
34.                         # 解决springboot中获取远程ip的问题
    
35.                         proxy_set_header Host $host;
    
36.             proxy_set_header X-Real-IP $remote_addr;
    
37.             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    
38.             proxy_pass http://myspringboot/api/springboot/;
    
39.         }
    
40.         error_page   500 502 503 504  /50x.html;
    
41.         location = /50x.html {
    
42.             root   html;
    
43.         }
    
44.     }
    
45. }

复制代码

其中：root myvuejs;表示myvuejs文件夹里面的全部都是vuejs的配置文件；反向代理的部分，主要就是将前端调用的/api/springboot/的rest接口请求，反向代理到http://xxxxxxxx:8081/api/springboot/的springboot接口上面去。**注意：**在Spring boot获取ip地址需要使用HttpServletRequest request.getHeader("X_FORWARDED_FOR");方法

总结

跨域问题，无需在springboot或vuejs打开跨域支持，直接使用nginx的静态文件服务器和反向代理服务器功能就可以解决这个问题了。