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

发布时间：2020-12-15 20:44:10 所属栏目：百科来源：网络整理

导读：我想向我无法控制的外部API发出GET请求.由于API的安全性,我的react应用程序无法直接向端点发出ajax请求.因此,我正在尝试创建一个简单的代理,如 here所示我的package.json文件如下所示： { "name": "my-stack","version": "0.1.0","private": true,"dependen

我想向我无法控制的外部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.

你可能现在已经知道了,但对于其他人来说这是有用的
我：

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

所以myreact.com/proxy/my/path被重定向到mybackend.com/my/path

我认为您的错误是您将目标作为代理的密钥而不是反应服务器上的路径.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!