reactjs - 如何在React/Webpack中创建代理来调用外部API

Question

我想向我无法控制的外部 API 发出 GET 请求。由于 API 的安全性，我的 React 应用程序无法直接向端点发出 ajax 请求。因此，我尝试创建一个简单的代理，如 here 所示。

我的package.json 文件如下所示:

{
  "name": "my-stack",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-router-dom": "^4.2.2",
    "react-scripts": "1.0.13"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "proxy": {
    "https://gold-feed.com/paid/*": {
        "target": "https://gold-feed.com/paid",
        "changeOrigin": true
    }
  }
}

然后我的 ajax 请求如下所示:

const apiUrl = 'https://gold-feed.com/paid/<apiID>/all_metals_json_usd.php';

jQuery.ajax({
  method: 'GET',
  url: apiUrl,
  success: (item) => {
    this.props.addItem(item);
  }
});

但它似乎没有做任何事情。我仍然收到以下错误:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

我基本上遇到了与文档 here 相同的问题他试图创建一个代理来访问 Steam api。

顺便说一句，我相信我正在使用的 create-react-app 项目是依赖于 webpack 的。

Answer 1

你现在可能已经明白了，但对于其他人来说，这就是有效的我:

"proxy": {
    "/proxy": {
        "target": "https://mybackend.com",
        "pathRewrite": {
                "^/proxy" : ""
        },
        "changeOrigin": true
    }
}

因此myreact.com/proxy/my/path被重定向到mybackend.com/my/path

我认为您的情况的错误是您将目的地作为代理的 key 而不是 react 服务器上的路径。