应要求提供CORS错误，并配置了标头和webpack-dev-server代理

Question

我有一个最近几天一直在设计的简单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. 尝试用我这边（客户端）的CORS控制所需的标头配置axios。这也没有带来任何解决方案。这是我想出的：

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的标头，但作为最后手段，我一直将该选项保持打开状态。

我已经尝试了详尽的解释和想要实现的目标，但随时可以索取更多信息。

谢谢。

Answer 1

从加载了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'
    }
  }
}

从浏览器的角度来看，不再有跨域请求。此配置可能也足以使服务器正确响应（例如，带有其CORS过滤器集的Jetty 9对我来说很好用）。另一方面，即使具有相同来源的请求，浏览器也可能发送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嗅探器对于了解在何处发送什么以及在响应中发送什么非常有用。

Answer 2

所有这些之后，我别无选择，只能在收到预检（ 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': '*',
    },

重新测试我们的请求后，一切顺利。我们发现没有办法仅在客户端执行此操作。

谢谢大家的评论。

Answer 3

由于响应头中没有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