使用 create-react-app 和 webpack 发出 CORS API 请求 - 不明确

Question

我正在尝试在不禁用浏览器中的 CORS 的情况下进行 API 调用。该应用程序是使用 react-create-app 创建的。它使用 webpack 和 webpackDevServer 进行开发。我在这里找到的所有答案都说将以下代码放入我的webpack.config 文件中。

devServer: {
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
        "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
      }
  }

但是，我已经在许多不同的地方尝试过，但它不起作用。

我继续收到错误：

加载资源失败：服务器响应状态为500()

和

加载失败...对预检请求的响应未通过访问 控制检查：不存在“Access-Control-Allow-Origin”标头 请求的资源。因此，原点 'http://localhost:3000' 是 不允许访问。响应的 HTTP 状态代码为 500。

我还尝试将我的调用从 axios 调用更改为 fetch 调用

return fetch(process.env.REACT_APP_API_URL + "/prod/user", {
    mode: 'no-cors',
    credentials: 'include',
    method: "GET",
    headers: {
        "x-api-key": process.env.REACT_APP_API_KEY
    }
})
.then(response => {
   return response.json()
})
.then(resp => dispatch(receiveUsers(resp.data)))
.catch(error => {console.log(error)})

这让我更接近了，但控制台现在正在返回

Response {type: "opaque", url: "", redirected: false, status: 0, ok: false, …}

如何解决这个 CORS 问题？提前感谢您的帮助！

Response/Request Headers

Answer 1

还不能添加评论，所以我会把它作为答案。

如果您尝试访问由其他节点应用程序或其他主机提供的 API。您可以配置 webpack-dev-server 将该请求代理到真实服务器。

查看Create React App Doc: Proxying API Requests in Development了解更多详情。

Answer 2

您看到对预检 OPTIONS 请求的 500 响应这一事实让我认为 Web 服务器可能根本不允许使用 OPTIONS 请求方法。

许多网络服务器默认只允许 HEAD、GET 和 POST，所以这是我要检查的第一件事。

如果这没有帮助，请确保上面的 webpack.config 代码对所有请求（即 OPTIONS 和 GET/POST）运行。

如果这没有帮助，请将一整套请求和响应标头发布到 OPTIONS 和 GET 请求，然后让我们看看从那里开始。

Answer 3

最好的选择是使用代理，尤其是当您使用外部 API 或多个 API 时。 只需安装proxy-middleware 并创建文件src/setupProxy.js 并在文件中添加类似的代码：

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

module.exports = app => {
  // setup proxies
  // 1st api
  app.use("/etherscan", proxy("http://api.etherscan.io/api"));
  // 2nd api
  app.use("/cryptocompare", proxy("https://min-api.cryptocompare.com/data"));

  // Note: setupProxy is an express server so you can also override anything in the req or res before proxy them for example 
  app.use("/cryptocompare", (req,res,next) => {
     req.headers = { 
        ...req.headers,
        "my-header":"my header value"
     }
     return proxy("https://min-api.cryptocompare.com/data")(req,res,next);
  });

  app.use("/cryptocompare", proxy("https://min-api.cryptocompare.com/data"));


  // also it's better to use .env variables
  // const {REACT_APP_API_ETHERSCAN_PROXY, REACT_APP_API_ETHERSCAN_BASE_URL} = process.env;
  // app.use(REACT_APP_API_ETHERSCAN_PROXY, REACT_APP_API_ETHERSCAN_BASE_URL);      
};

对于您的 API，如果您可以从 .env 变量中获取基本 URL，例如：

const {REACT_APP_API_ETHERSCAN_PROXY, REACT_APP_API_ETHERSCAN_BASE_URL} = process.env;
const baseURL = REACT_APP_API_ETHERSCAN_PROXY || REACT_APP_API_ETHERSCAN_BASE_URL;

附加建议：您可以查看axios，而不是继续为每个 API 调用传递 process.env.REACT_APP_API_URL 和标头，您可以在其中创建具有默认属性的 API 实例，例如：

const {
  REACT_APP_API_ETHERSCAN_PROXY, 
  REACT_APP_API_ETHERSCAN_BASE_URL,
  REACT_APP_API_TIMEOUT,
  REACT_APP_API_ETHERSCAN_KEY
} = process.env;

export const etherscanAPI = axios.create({
  "baseURL": REACT_APP_API_ETHERSCAN_PROXY || REACT_APP_API_ETHERSCAN_BASE_URL,
  "timeout": parseInt(REACT_APP_API_TIMEOUT),
  "headers": {
    "X-Requested-With": "XMLHttpRequest"
  },
  "params": {
    "apiKey": REACT_APP_API_ETHERSCAN_KEY
  }
});

然后etherscanAPI.get("/whatever")