网络错误/403 禁止请求服务 React JS axios 代理

Question

我需要制作一个 React 应用程序来向此服务发出请求 https://www.indecon.online/last 以获取职位申请，而我目前在尝试发出 GET 请求时遇到问题。

它在浏览器或 Postman 中运行良好，但是当尝试使用 axios 时，情况就不一样了。

起初我尝试使用 axios 发出一个简单的 GET 请求，如下所示：

然后我得到了这个错误：

Access to XMLHttpRequest at 'https://www.indecon.online/last' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

所以，我第二次尝试，这次使用 http-proxy-middleware npm 包（遵循本教程：https://levelup.gitconnected.com/overview-of-proxy-server-and-how-we-use-them-in-react-bf67c062b929）。我像这样配置了一个 setupProxy.js 文件：

并且像这样简单地更改了异步函数：

现在我在请求后收到此错误（第二个错误是 catch 块内 console.error() 的结果）：

GET http://localhost:3000/last 403 (Forbidden)

ERROR:  Error: Request failed with status code 403
at createError (createError.js:16)
at settle (settle.js:17)
at XMLHttpRequest.handleLoad (xhr.js:61)

我已经用另一个 public 服务尝试了代理配置和 axios 请求并得到了成功的响应。

感谢任何帮助！

Answer 1

我假设您使用 create-react-app 创建了应用程序，因此您有一个 package.json 依赖于 react-scripts 和一个使用 react-scripts 的启动脚本。您可以从项目中删除 http-proxy-middleware 包并在 package.json:

中添加代理条目

{
  "dependencies": {
    "react-scripts": "3.4.1", <-- you should already have this
  },
  "scripts": {
    "start": "react-scripts start", <-- you should already have this
  },
  "proxy": "https://www.indecon.online"
}

现在在你的 React 代码中你可以做 axios.get('/last')

使用 npm 或 yarn start 启动您的项目。

如果它不起作用，那么你可以 post 你在问题中的 package.json（不是图片，请复制粘贴文本）。

这个答案也是in the documentation你在问题中提到的。

网络错误/403 禁止请求服务 React JS axios 代理

Network Error / 403 Forbidden on request to a service React JS axios proxy

reactjs

proxy

cors

axios

http-status-code-403