ajax - 仅使用客户端ajax请求通过mailgun api发送邮件

Question

我在本地主机上工作(在静态 React 网络应用程序中)和表单提交，我想通过我的联系表单发送电子邮件。所以我像这样发布到 mailgun api:

   axios({
      url: 'https://api:key-someapikey@api.mailgun.net/v3/somesandboxdomain1c.mailgun.org/messages',
      method: 'post',
      username: 'api',
      password: 'key-somekey',
      data: {
        from: "Excited User <mailgun@some.example.org>",
        to: "myemail@gmail.com",
        subject: "Hello from react app",
        text: "Testing some Mailgun awesomness!"
      },
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        'Authorization': `Basic ${window.btoa('api:key-someapikey')}`
      }
    })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });

但我不断收到此错误或其变体之一:

XMLHttpRequest cannot load https://api.mailgun.net/v3/somesandbox.mailgun.org. Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response.

我使用的是静态网络应用程序，没有用于发送数据的服务器。我已经尝试添加和删除各种 header ，例如 Access-Control-Allow-Headers: Authorization 等。似乎没有任何效果

Answer 1

不确定我是否回答得太晚了，但你可以试试这个:

axios({
    method: 'post',
    url: `${mailgun.baseUrl}/${mailgun.domain}/messages`,
    auth: {
        username: 'api',
        password: mailgun.apiKey
    },
    params: {
        from: 'Awesome Development Team <noreply@yourdomain.com>',
        to: 'testing@example.com',
        subject: 'Hello',
        text: 'Welcome to the team!'
    }
}).then(
    response => {
        console.log(response)
    },
    reject => {
        console.log(reject)
    }
)

Mailgun 文档声明它接受请求参数而不是请求主体，因此在 Axios 中您使用的应该使用 params 而不是 data。

对于Mailgun需要的Basic Auth，Axios确实提供了一个更好的方法，即提供一个auth对象(引用上面的代码)

您可以引用这些链接了解更多详情

• https://documentation.mailgun.com/en/latest/api-sending.html#sending
• https://github.com/axios/axios (滚动到请求配置)

希望这对您有所帮助!