Vue JS 中 axios 的 Slack API CORS 错误

Question

我正在使用 Capacitor JS 和 Nuxt JS 构建一个应用程序来与 Slack API 交互，以便我可以设置我的 Slack 状态，我已经创建了一个 Slack 应用程序并有一个xoxp-令牌，当我点击端点时它可以正常工作通过 Postman 发出POST请求，但从我的浏览器（本地主机）和手机上正在运行的应用程序中，我收到以下 CORS 错误：

从源“http://localhost:3000”访问“https://slack.com/api/users.profile.set”的 XMLHttpRequest 已被 CORS 策略阻止：访问控制不允许请求标头字段授权- 预检响应中的允许标题。

现在这看起来很愚蠢，因为您必须使用authorization标头来提供用于身份验证的承载令牌，但即使暂时省略了这一点，CORS 错误仍然存​​在。

我正在尝试POST到users.profile.set的端点查看另一种方法

我的 Axios 代码中缺少什么？

setSlackStatusWithReminder (title, expiry) {
  const body = this.convertToQueryString({
    profile: this.convertToQueryString(this.profile),
    token: 'xoxp-mytoken'
  })

  this.$axios.post('https://slack.com/api/users.profile.set', body, {
    timeout: 10000,
    transformRequest(data, headers) {
      delete headers.common['Content-Type'];
      return data;
    }
  }).then(res => {
    console.log(res)

    if (res.data.ok != true) {
      alert('something went wrong with the .then')
    }

    this.isSettingStatus = false
    this.actions.isShown = false
  }).catch(err => {
    this.isSettingStatus = false
    this.actions.isShown = false
  })
},

更新

我有一个函数可以将我的请求正文转换为我的数据中的查询字符串，如下所示：

export default {
  data () {
    return {
      profile: {
        status_text: '',
        status_emoji: '',
        status_expiration: 0
      }
    }
  }
}

查询字符串函数转换正文

convertToQueryString (obj) {
  const convert = Object.keys(obj)
                         .map((key, index) => `${key}=${encodeURIComponent(obj[key])}`)
                         .join('&')

  return convert
},

我正在构建它：

const body = this.convertToQueryString({
        profile: this.convertToQueryString(this.profile),
        token: 'xoxp-mytoken'
      })

它给了我一个invalid_profile响应。

Answer 1

Slack 不会以兼容的响应来响应飞行前OPTIONS请求。

通过确保它符合作为所谓的“简单请求”处理的要求，可以完全避免预检。

值得注意的是，确保内容类型是application/x-www-form-urlencoded ，将请求正文序列化以匹配并且不要使用Authorization标头来传递您的不记名令牌，而是将其作为参数传递到您的请求( token ) 中。

Answer 2

不知道为什么这如此困难，以下是对 Slack API 的有效POST请求：

// this.profile -> is the object with the status_* fields
const body = `profile=${JSON.stringify(this.profile)}&token=some_token`

this.$axios.post('https://slack.com/api/users.profile.set', body, {
  timeout: 10000,
  transformRequest(data, headers) {
    delete headers.common['Content-Type'];
    return data;
  }
}).then(res => {
  console.log(err)
}).catch(err => {
  console.log(err)
})