Skip to content

GitLab

Closed
Created by JayChen@JayChenOwner

本地开发vue项目调用接口显示308，但react项目正常使用

背景

替换新的请求域名时，vue项目调用接口时出现如下问题。
image
而react项目正常替换，并接口可用，表现如下
image

原因

经过对两个项目的代理模式进行了解后发现。
vue使用的http-proxy-middleware: 0.19.x react项目使用的http-proxy-middleware: 2.x

猜想

初步怀疑是老版本的http-proxy-middleware没有对本地的http进行https伪装，而新版本做了。
因为代理目标地址都是线上的https接口，所以被认为权限不足，拒绝了http的请求。

验证猜想

image
通过如图所示配置，将本地开发启动改为https启动后，在 https://localhost 下成功调用了接口。

做过的更多尝试

尝试伪装https

补全低版本的https伪装机制。修改如下
image
然后https就可以重新设置为false了，但是在部分开发的电脑上可行，有一部分不可行，猜测是host配置限制的问题，此方法不通用。

尝试移除https标识

代码如下

onProxyReq: function (onProxyReq, req) {
   onProxyReq.removeHeader('x-forwarded-host');
   onProxyReq.removeHeader('x-forwarded-proto');
   onProxyReq.removeHeader('x-forwarded-port');
   onProxyReq.removeHeader('x-forwarded-for');
},

此方法同样在部分电脑可行，部分不行

结论

最终选择兼容性最强，稳定性最高，但略有繁琐的最初方案，设置https: true

Edited by JayChen