微服務使用swagger-ui工具，跨域問題

問題描述

使用swagger工具測試微服務時，出現端口號不一致的跨域問題，如下圖

解決方案

在nginx中配置proxy_pass代理，解決跨域，如下配置 nginx.conf

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    upstream proxyUrl{
        server localhost:8080;
    }
    server {
        listen       3200;
        server_name  localhost;

        #charset koi8-r;
		location  ~*\.(.*?) {  
            root   E:\文檔\Projects\swagger-ui-master\dist;  
        } 
          
        #access_log  logs/host.access.log  main;
        
        location  / {
            proxy_pass http://proxyUrl;
            index  index.html index.htm;

            if ($request_method = 'OPTIONS') {
                add_header 'Access-Control-Allow-Origin' '*';
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';              
                add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
                add_header 'Access-Control-Max-Age' 1728000;
                add_header 'Content-Type' 'text/plain charset=UTF-8';
                add_header 'Content-Length' 0;
                return 204;
            }
            if ($request_method = 'POST') {
                add_header 'Access-Control-Allow-Origin' '*';
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
                add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
            }
            if ($request_method = 'GET') {
                add_header 'Access-Control-Allow-Origin' '*';
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
                add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
            }
        }

    }
}

nginx.conf 配置項說明

	upstream proxyUrl{
        server localhost:8080;
    }
	 server {
		 listen       3200;
         server_name  localhost;
         
         location  / {
            proxy_pass http://proxyUrl;
            index  index.html index.htm;
          }
          
          location  ~* \.html$ {  
             root   E:\文檔\Projects\swagger-ui-master\dist;
             index  index.html index.htm;       
         }
	 }

以上配置結果說明如下：

訪問地址	代理或訪問地址
http://localhost:3200/index.html	http://localhost:3200/index.html
http://localhost:3200/xxx	http://localhost:8080/xxx

效果展示

寫在最後

筆者也是剛接觸這方面，經驗不足，文章只供參考。如有不妥或誤導，請不吝賜教