当前位置: 首页 > 知识库问答 >
问题:

配置setupProxy.js使用超文本传输协议-代理-中间件

东方和煦
2023-03-14

我试图配置一个代理服务器(setupProxy.js)内创建反应应用程序使用HTTP-代理-中间件获得访问天气数据API(api.darksky.net)。

我遵循React文档中的步骤(https://facebook.github.io/create-react-app/docs/proxying-api-requests-in-development#configuring-代理(手动)但我仍然与CORS有问题。

我曾尝试在我的提取调用中使用https://cors-anywhere.herokuapp.com/(https://github.com/Rob--W/cors-anywhere/)预处理我的API URL,这是有效的,但对我来说感觉有点老套,我宁愿自己工作。

以下是最终从组件中调用的函数:

  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
    }));
}

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

已阻止跨源请求:同一源策略不允许读取

共有2个答案

慕容成和
2023-03-14

代理在代码中放置错误,请尝试此操作

app.use("/forecast", 
   proxy({
      target: "https://api.darksky.net/",
      changeOrigin: true
   })
);
江宏放
2023-03-14

在这种情况下,不需要设置自定义代理。。。

只需将其添加到您的包中。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"
  ]
}

然后在你的应用程序中。js

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

它应该会起作用。。。(请注意,所有异步调用都应在componentDidMount生命周期方法中完成…)

 类似资料:
  • 嗨,我一直在尝试代理解决方案,以避免在myapp中的cors问题,但它似乎不起作用,我重启了我的机器这么多次,这没有什么区别。基本上,myapp使用ftchApi调用另一个域(localhost:8080),这是一个SpringBoot应用程序终结点。我添加了package.json"代理":"http://localhost:8080/",但api仍然返回与localhost:3000调用,我尝

  • 我的反应应用程序是在localhost:3000和节点服务器上运行localhost:5000。当我试图连接到快速API时,路由将localhost:3000/auth/google而不是localhost:5000/auth/google 用户操作。js } setupProxy.js 节点server.js 编辑:反应包。json 我是新手,因此我不知道代理究竟是如何工作的。

  • 嗯,我正在开发一个反应应用程序。我有一个快速服务器在localhost:5000和反应应用程序在localhost:3000。我正在通过谷歌oauth流使用Passportjs。现在真正的问题是,我已经使用超文本传输协议-代理-中间件去localhost:5000/auth/google从我的反应应用程序使用登录按钮,它指向 /auth/google.然后认证后,我应该返回到 /auth/goog

  • 我只是有一个关于服务中http请求的结构和处理响应的问题。我正在使用Angular2。alpha46 Typescript(刚刚开始测试-我喜欢它…Ps…。感谢所有一直致力于它并通过github作出贡献的人) 因此,采取以下措施: 登录表单。组成部分ts 从这个组件中,我导入了我的userService,它将容纳我的超文本传输协议请求,以登录用户。 使用者服务ts 我想做的是能够处理http请求之

  • 我尝试使用以下方法从Api获取json数据 我将这个物体建模如下 数据如下: 当我尝试使用模型访问时,我收到错误“\u InternalLinkedHashMap”

  • 我想知道你对这个概念的看法/意见。如果有替代方案?这是否可行/有益? 据我所知,对于每个http请求,服务器都会执行一些操作并返回http响应。 现在考虑任何场景,我们希望对服务器上运行的进程有更多的控制。 情景1:http请求发送- 在这里,资源被浪费了。 情况2:http请求发送- 在这里,客户端不知道服务器中运行的进程的状态。客户端必须等待,直到它获得超文本传输协议响应。 我的想法是:在初始