使用 http-proxy-middleware 配置 setupProxy.js

Posted 2023-03-04

【中文标题】使用 http-proxy-middleware 配置 setupProxy.js

【英文标题】：Configuring setupProxy.js using http-proxy-middleware

【发布时间】：2019-06-14 07:53:33

【问题描述】：

我正在尝试使用 HTTP-proxy-middleware 在 create-react-app 中配置代理服务器 ( setupProxy.js ) 以访问天气数据 API ( api.darksky.net )。

我按照 React 文档 (https://facebook.github.io/create-react-app/docs/proxying-api-requests-in-development#configuring-the-proxy-manually) 中的步骤操作，但仍然遇到 CORS 问题。

我已经尝试在我的 fetch 调用中使用 'https://cors-anywhere.herokuapp.com/' (https://github.com/Rob--W/cors-anywhere/) 预先添加我的 API URL，这是可行的，但对我来说感觉有点老套，我宁愿自己让它工作。

这是最终从 componentDidMount 中调用的函数：

  fetchWeatherDataAuto = () => 
    let lat = this.state.locInfo.lat;
    let lon = this.state.locInfo.lon; 

    fetch(`https://api.darksky.net/forecast/$apiKey.darkSky_key/$lat,$lon`)
      .then(response => response.json())
      .then(response => console.log("Weather Response: ", response));
  

这是我的 setupProxy.js 文件的代码：

const proxy = require('http-proxy-middleware');

module.exports = function(app) 
    app.use(proxy("/forecast", 
          target: "https://api.darksky.net/",
          changeOrigin: true
    ));

此错误显示在我的控制台中：

跨源请求被阻止：同源策略不允许读取 >https://api.darksky.net/forecast/myAPIKey/9.739>9056,-82.8484079 处的远程资源。 （原因：CORS 标头“Access-Control-Allow-Origin”>缺失）。

【参考方案1】：

这种情况下不需要设置自定义代理...

只需将其添加到您的 package.json 中：

  "name": "test1",
  "version": "0.1.0",
  "private": true,
  "dependencies": 
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-scripts": "2.1.3"
  ,
  "proxy": "https://api.darksky.net", // <= add this here...
  "scripts": 
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  ,
  "eslintConfig": 
    "extends": "react-app"
  ,
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]

然后在你的 App.js 中

  componentDidMount() 
    fetch(`/forecast/$YOUR_API_KEY_HERE/$lat,$lon`)
      .then(response => response.json())
      .then(response => console.log('Weather Response: ', response));
  

它应该可以工作......（注意所有异步调用都应该在 componentDidMount 生命周期方法中完成......）

【讨论】：

成功。看来我错过了 package.json 中的属性。根据我在其他线程中阅读的内容，建议应该从 package.json 删除 'proxy' 属性，只留下代理服务器（ setupProxy.js ）。

@RashidIqbal 用于开发，正如它在文档中所述...

@SakoBu，如何使用托管应用解决此问题，我的应用托管在 Firebase 托管中

@RashidIqbal 您可以编写一个简单的代理服务器或更好的（因为您已经在 GCC 生态系统中）一个获取数据然后将其转发给客户端的云功能...... CORS 是一个浏览器向服务器发出服务器它将工作......

【参考方案2】：

代理在你的代码中放置错误，试试这个

app.use("/forecast", 
   proxy(
      target: "https://api.darksky.net/",
      changeOrigin: true
   )
);