Axios 不使用带有 https 的代理设置答案

【问题标题】：Axios not using proxy setting with httpsAxios 不使用带有 https 的代理设置
【发布时间】：2018-11-26 12:24:13
【问题描述】：

我正在尝试从使用 axios 通过 HTTPS 运行的 react（使用 redux）前端 Outlook add-id 发出请求。我想使用 package.json 中的代理设置，所以我只需要在我的请求中使用 /path/to/endpoint 但是，后端通过 http 运行，虽然两者都在本地主机上，但似乎 axios 不使用代理设置并且不会重定向到非 https 端点。我尝试通过 https 运行后端，将请求发送到我实际托管运行 https 的后端的安全 heroku 服务器，添加 axios-proxy-fix 包，但似乎没有任何效果。所以我目前的设置如下（删除了不相关的代码）： package.json 文件：

{
  ...
  "dependencies": {...}, 
  "proxy": "http://localhost:5000"
}

我提出请求的 authActions.js 文件：

export const signupUser = (userData) => dispatch {
  axios.post('/auth/user/signup', userData)
       .then(...)
       .catch(...);
};

然后我得到这个错误： “加载资源失败：服务器响应状态为 400 (HTTP/2.0 400) https://localhost:3000/auth/user/signup”。

我原以为路径是http://localhost:5000/auth/user/signup，因为这是代理指定的位置，也是我的后端运行的位置。但是，它正在尝试访问端口 3000... 这是前端通过 https 运行的端口。

有人有什么建议吗？我唯一的另一个想法是尝试不使用 axios，因为 fetch 可以使用代理设置？

【问题讨论】：

标签： reactjs redux axios outlook-addin redux-thunk

【解决方案1】：

开发服务器只会尝试发送请求代理的 Accept 标头中的 text/html。

...来自here。

你是否包含了那个标题？

【讨论】：

不，我只指定“Content-Type”：“application/json”，并接受：“application/json”。
我确实从您提供的链接中找到了有关自己配置代理的部分，但非常感谢！

【解决方案2】：

所以经过一番搜索，我找到了一个三步解决方案。

首先，我必须使用命令 HTTPS=true npm run server 通过 https 运行开发服务器（服务器是我的脚本名称）。

其次，我必须在 package.json 文件中指定我想要一个安全代理，如下所示：

"proxy": {
"secure": true,
"target": {
  "host": "https://localhost",
  "port": 5000
  }
}

最后，我将 ajax 请求更改为使用 fetch 而不是 axios。

我希望这对发现自己处于类似情况的人有所帮助。

【讨论】：

【解决方案3】：

对于遇到此问题的其他人。另一种可能的解决方案是：

检查以确保您使用的是 React 应用程序折叠中的 package.json，而不是服务器文件夹中的。

第二个可能的问题，你只需要在你的 react 项目上运行 npm build。

【讨论】：