Swagger报错TypeError: Failed to fetch解决方案

场景描述

最近部署一个项目，由于兼容IE8需要将前后台部署到一个站点下，nginx配置如下：

server {
    listen       80;
    server_name www.aaa.ink;
	client_max_body_size  1000M;
	client_body_timeout 20s;
	client_header_timeout 10s;
	send_timeout 30s;
	ssl_protocols TLSv1.2;
    charset utf-8;
	#后端接口
	location ^~ /api/ {
		proxy_pass http://127.0.0.1:8080/api/;
	}
    
    location ~/(.*)$ {
    #前端项目
        root   /usr/local/nginx/ttm;
        index  index.html index.htm;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

后台使用Swagger作为接口文档，项目启动后站点可以正常访问，但是在Swagger中测试接口会报错，错误提示为TypeError: Failed to fetch

问题分析

分析发现Swagger实际的请求地址变成了http://127.0.0.1:8080/api/，并不是我们实际的http://www.aaa.ink/api/接口地址。查资料发现Swagger会根据用户请求来获取一个 server 地址。由于使用了nginx反向代理，Swagger获取了我们配置的内网地址，导致请求无法正常响应。

问题解决

location ^~ /api/ {
	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_set_header X-Forwarded-Proto $scheme;
	proxy_set_header X-Forwarded-Host $server_name;
	proxy_pass http://127.0.0.1:8080/api/;
}

将后台项目的转发设置请求头，使Swagger可以获取到真实的地址。问题可以解决。