Vue JS 中 axios 的 Slack API CORS 错误 更新

如何解决Vue JS 中 axios 的 Slack API CORS 错误 更新

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

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

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

我正在尝试 POST 到 users.profile.set View another method 的端点

我的 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
      }
    }
  }
}

查询字符串函数转换body

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 响应。

解决方法

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

确保它符合作为所谓的 "simple request" 处理的要求，从而完全避免预检。

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

,

不知道为什么这么难，以下是对 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)
})