nginx解決vuejs與springboot跨域問題

問題

在實施先後端分離的時候，vuejs與springboot一般不在同一臺服務器，這個時候，vuejs調用springboot的時候一般會出現跨域問題。

解決思路

這裏的解決方案，主要是經過nginx搭建一個靜態文件服務器，而後，再在此基礎上面啓用nginx的反向代理功能，反向代理springboot的rest接口服務便可。

nginx.conf

# 啓動多worker進程
worker_processes  auto;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
	# 僞裝配置springboot服務集羣
	upstream myspringboot {
        server 127.0.0.1:8081;
		keepalive 32;
    }
    default_type  application/octet-stream;
    # 日誌格式
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';
    sendfile        on;
    keepalive_timeout  65;
    # 啓用gzip壓縮
    gzip  on;
    server {
        # nginx服務器對外8080端口
        listen       8080;
        server_name  localhost;
        # 日誌輸出
        access_log  logs/myvuejs.access.log  main;
        # vuejs靜態文件配置
        location / {
            root myvuejs;
            index  index.html index.htm;
        }
        # 反向代理springboot接口服務
        location /api/springboot/ {
			# 解決springboot中獲取遠程ip的問題
			proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://myspringboot/api/springboot/;
			proxy_http_version 1.1;
	        proxy_set_header Connection "";
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

其中： 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的靜態文件服務器和反向代理服務器功能就能夠解決這個問題了。

參考

• Module ngx_http_proxy_module