3

我最近几天一直在设计一个简单的 ReactJS+Typescript 应用程序（与 Webpack 捆绑在一起）。现在，我开始了后端连接部分（不是我的领域，也不是我在这种情况下的责任），我遇到了一些困难。主要问题是浏览器上的 CORS 错误。这是我的设置：

    "webpack": "^4.30.0",
    "webpack-dev-server": "^3.3.1",
    "typescript": "^3.4.5",
    "react": "^16.8.6",
    "axios": "^0.18.0",
    Chrome version 74.0.3729.131 (64-bit)

没有任何类型的建议或实验，这是我遇到的错误： 在此处输入图像描述

我已经尝试了几件事来解决这个问题，但没有一个真正解决了这个问题。它们如下：

  1. 在我的webpack.dev.ts配置文件中，我配置了 webpack 代理属性。我是这样配置的：
  devServer: {
    contentBase: path.join(__dirname, process.env.PUBLIC_PATH || '../dist'),
    compress: true,
    host: process.env.DEV_HOST || 'localhost',
    port: process.env.DEV_PORT || 8000,
    open: 'chrome',
    proxy: {
      '/api': {
        target: 'http://<ip>:8888',
        secure: false,
      },
    },
    headers: {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Headers': '*',
        'Access-Control-Allow-Methods': '*',
    },
  },

对后端的请求构建如下：

const config = {
  method: 'post',
  url: '/api/login',
  data: { password: password },
};
axios(config)
  .then(resp => console.log(resp))
  .catch(error => console.log(error));

请注意，目前，该password字段只是一个占位符，并未在后端进行验证，因此，Access-Control-Allow-Credentials不需要标头。

令我非常失望的是，该请求似乎没有使用配置的代理，因为这是错误： 在此处输入图像描述

在网络选项卡上，也没有提及后端 IP 地址。请注意，只有在这种情况下，请求才会显示为POST而不是OPTIONS请求。

  1. 尝试axios在我这边（客户端）使用 CORS 控制所需的标头进行配置。这也没有带来任何解决方案。这就是我想出的：
const config = {
  method: 'post',
  url: 'http://<ip>:8888/api/login',
  data: { password: password },
  headers: {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Headers': '*',
    'Access-Control-Allow-Methods': '*',
  },
};
axios(config)
  .then(resp => console.log(resp))
  .catch(error => console.log(error));

出现的结果类似于没有任何配置的结果（此处附上第一张图片）。

  1. 最后，我为 CORS 安装了一个 Chrome 扩展，它（我想）将标头附加Access-Control-Allow-Origin: *到所有请求。这就是事情变得有趣/奇怪的地方。在此扩展处于活动状态（并且未对其进行配置）的情况下，即使我禁用了所有其他先前的选项，错误也会发生变化：

在此处输入图像描述

我也尝试过同时激活所有三个先前的选项，最后一个错误就是出现的。

我不确定下一步要去哪里，或者如何从这里开始。我避免请求更改服务器 API 的标头，但作为最后的手段，我保持该选项处于打开状态。

我已尝试对解释和我想要实现的目标进行彻底的解释，但请随时索取更多信息。

提前致谢。

4

3 回答 3

4

毕竟，在收到预检（ OPTIONS）请求时，我别无选择，只能用几个标头更新后端：

  • Access-Control-Allow-Headers，其中包含请求在同一个标​​头上的任何内容；
  • Access-Control-Allow-Origin, 设置为*. 由于在生产中，前端和后端都是本地的，这将只用于我们的开发环境；
  • Access-Control-Allow-Methods，这是为了*方便而设置的。我们可以指定在我们允许的域上允许哪些方法，但我们认为这对于开发环境来说不是必需的。

设置这些标志后，我在 Webpack 上设置了代理配置，如下所示：

    proxy: {
      '/api': {
        target: 'http://<ip>:8888',
        secure: false,
      },
    },
    headers: {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Headers': '*',
        'Access-Control-Allow-Methods': '*',
    },

在重新测试我们的请求时，一切都很顺利。我们发现无法仅在客户端执行此操作。

谢谢大家的评论。

于 2019-05-20T12:45:43.437 回答
3

从加载 Web 应用程序的同一源公开 API 后端服务器有助于绕过 CORS 限制。这就是 webpack 开发服务器代理派上用场的地方。首先，确保对 API 的请求寻址到代理。如果 XMLHttpRequest 或在源代码地址中获取绝对 URL（与相对 URL 相对），则使用指示开发模式的标志来选择代理作为源。例如：

fetch(isDevelopment ? '/api' : 'http://backend.server.com/api')
.then(response => processResponse(response));

其次，配置代理以在真实后端服务器上定位所需的 API：

devServer: {
  proxy: {
    '/api': {
      target: 'http://backend.server.com'
    }
  }
}

从浏览器的角度来看，不再有跨域请求。此配置可能也足以让服务器正确响应（例如 Jetty 9 及其 CORS 过滤器集对我来说很好）。另一方面，Origin即使是同源请求，浏览器也可能会发送标头。为了防止不同后端服务器上的 CORS 问题，如果有，请更改Origin标头以匹配目标 URL，如下所示：

devServer: {
  proxy: {
    '/api': {
      target: 'http://backend.server.com',
      onProxyReq: proxyReq => {
        if (proxyReq.getHeader('origin')) {
          proxyReq.setHeader('origin', 'http://backend.server.com');
        }
      }
    }
  }
}

有关更多信息，请参阅dev-server的文档和它在后台使用的http-proxy-middleware库。此外，像 Wireshark 这样的 TCP/HTTP 嗅探器对于了解发送的内容和响应的内容非常有帮助。

于 2020-02-18T20:34:05.997 回答
1

由于access-control-allow-origin响应标头中没有标头，因此您可以在代理设置中强制使用一个标头：

proxy: {
  '/api': {
    target: 'http://<ip>:8888',
    secure: false,
    onProxyRes: response => {
        response.headers['access-control-allow-origin'] = 'http://localhost:8000';
    },
  },
},

这意味着所有代理的响应都将具有此标头。这onProxyRes是http-proxy-middleware东西，来源：https ://github.com/chimurai/http-proxy-middleware/blob/master/recipes/proxy-events.md

于 2019-11-25T13:45:14.790 回答