reactjs - CORS：通过 webpack-dev-server 将 localhost 代理到外部 API

Question

我正在构建简单的反应驱动的联系页面，如果我可以测试从本地开发机器发送的电子邮件，那就太好了。我正在使用我测试过的Zoho Email APIcurl和Insomnia - 一切都很好，我可以发送电子邮件。

当我尝试通过 React 应用程序执行相同操作时，问题就开始了axios。该应用程序本身通过本地提供webpack-dev-server。没有通过代理请求wds，浏览器就会报错CORS。但是，当我尝试通过wds设置适当的标头代理请求时，我受到了欢迎，400 Bad Request并没有更多的帮助进行调试。

相关wds设置：

const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')

exports.devServer = ({ host, port } = {}) => {
  const plugin = new ReactRefreshWebpackPlugin()

  return {
    devServer: {
      headers: {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
        'Access-Control-Allow-Headers':
          'X-Requested-With, content-type, Authorization',
      },
      proxy: {
        '/api/accounts/ZOHO_ID_NOT_SHOWN/messages': {
          target: 'https://mail.zoho.eu',
          secure: false,
        },
      },
      https: true,
      contentBase: path.join(__dirname, 'assets'),
      stats: 'errors-only',
      historyApiFallback: true,
      overlay: true,
      hot: true,
      host,
      port,
    },
    plugins: [plugin],
  }
}

以及我axios用来发送电子邮件的功能：

  const sendEmail = async () => {
    const { name, email, message } = formState

    try {
      const response = await axios({
        method: 'post',
        url: EMAIL_SEND,
        headers: { Authorization: EMAIL_AUTH },
        data: {
          toAddress: EMAIL_TO,
          subject: `Message from ${name} @ ${email}`,
          content: message,
        },
      })
      console.log(response) // debugging
    } catch (e) {
      console.log(e.response)
    }
  }

在上面的函数中，EMAIL_SEND是从其他地方导入的，它的值是/api/accounts/ZOHO_ID_NOT_SHOWN/messages- 镜像wds代理值。

通过上述设置，当我尝试从 localhost 发送测试电子邮件时，我得到了400 Bad Request……而且仅此而已。我确定问题在于我如何通过代理请求，wds但我有点想不出如何解决它。任何建议将不胜感激！

标签： reactjswebpackaxioscross-domainwebpack-dev-server