javascript - URL 未在 React 中获取数据

Question

我想向所需的 URL 发出发布请求，但没有代理设置，它会给出 cors 错误，我已经完成并最终设置了代理，但仍然将 localhost 作为网址。我已附上我的 proxyfile.js 和我的代码片段以及下面的错误。

export function PostData(userData) {
  var targetUrl = "/downloadableReport";
  return new Promise((resolve, reject) => {
    fetch(targetUrl, {
      method: "POST",
      headers: {
        "Content-Type": "application/json; charset=utf-8",
        Accept: "application/json"
      },
      body: JSON.stringify({
        requestData: {
          userName: userData.userName,
          password: userData.password
        }
      })
    }).then(response => response.json());
  });
}

这是setupProxy.js代码:

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

module.exports = function(app) {
  app.use(
    proxy("/downloadableReport", {
      target: "http://192.168.1.220:28080/xms/abc",
      changeOrigin: true
    })
  );
};

这是错误:

Answer 1

如果 CORS 是问题所在并且您使用 Express 作为后端服务器，那么

var allowCrossDomain = function (req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,PATCH,DELETE,OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With, Role');
  // intercept OPTIONS method
  if ('OPTIONS' == req.method) {
    res.sendStatus(200);
  } else {
    next();
  }
};

然后添加

app.use(allowCrossDomain);

放弃代理。对我来说，你的问题看起来像是，你正在将数据发布到 React 应用程序本身。如果您确实在同一个项目中同时拥有 API 和 React，我建议您将它们分开。

如果它们确实不在一起，请将 targetUrl 更新为包含协议(protocol)和域的正确 URL。就像 var targetURl = 'http://localhost:3000/downloadableReport。

更新:我阅读了您对 Sudhir 的评论回复。将目标 Url 编辑为 API 的完整路径 var targetUrl = "http://192.168.1.220:28080/xmsreport/report/downloadableReport" 并将我上面提供的 CORS 代码添加到 API位于 192.168.1.220:28080