vue调用接口502的解决方案

1,556 阅读2分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第9天,点击查看活动详情

由于好久没有彭前端,接二连三的碰到问题,昨天是调百度api跨域,今天又整出来个502,当碰到502这个错误码时,我的第一反应是我的请求方式(get、post)不对。

调整了前端的异步请求方式,有post改为get,依旧是这个错误。来回试了几次同样都是502(这难道是狗皮膏药粘住了?O(∩_∩)O哈哈~)

查看后台是否有异常信息?也未曾打印日志显示问题出在哪里!着实有些摸不到门路,常规的502虽是上面描述的这样,但是这里感觉有点不对劲!

怀疑可能不是这个问题导致的异常,联想到昨天的解决方案。可能也是需要通过nginx去配置解决这个棘手的问题!

查看一下nginx的配置文件

   server {
            listen          80;
            server_name www.test.com; # 这里使我们访问的域名或者域名对应的ip地址
	location / {	
		root /tools/sdk/dist;  # 我们的vue页面打包后的dist所在文件路径地址
                    index index.html;  # 这里使我们vue默认访问的首页面
                    try_files $uri $uri/ /index.html;
	}
	location ~ ^/(baidu)/.* {  # 此处配置的baidu是我们vue项目中代理的变量,我们这里配置他的跳转路径
		rewrite  ^.+baidu/?(.*)$ /$1 break;
		include  uwsgi_params;
		proxy_pass https://aip.baidubce.com; # 代理具体的访问接口信息地址

	}
    }

看了三四遍,我也没看出什么异常信息。

就这样尝试一个配置如下, 死马当活马医吧!

        location ~ ^/(api)/.* {
                    rewrite  ^.+api/?(.*)$ /$1 break;
                    include  uwsgi_params;
                    proxy_pass https://devzxb.testsdk.com;

       }

在上方的配置文件范围内,添加了一个api的配置信息。重启nginx,重新项目访问。

没成想就这么解决了?虽然问题解决了,但是没有搞明白其中的原理?为什么是502?502的状态码还以就是请求方式不对造成的啊?

要学习饿的东西还是挺多的,学习吧少年,奋斗吧,少年!

更多编程内容,请扫码关注《coder练习生》