Vue JS 中 axios 的 Slack API CORS 错误答案

【问题标题】：Slack API CORS error with axios in Vue JSVue JS 中 axios 的 Slack API CORS 错误
【发布时间】：2021-07-12 14:40:00
【问题描述】：

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

从源“http://localhost:3000”访问“https://slack.com/api/users.profile.set”处的 XMLHttpRequest 已被 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
      }
    }
  }
}

查询字符串函数转换正文

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-api 打算从浏览器访问）也许 api 设置中有一些 cors 选项，但我对此表示怀疑。

标签： javascript node.js vue.js slack-api

【解决方案1】：

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

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

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

【讨论】：

那么我如何将上面的代码付诸实践，我刚刚尝试将 Content-Type 设置为 application/x-www-form-urlencoded，并且看不到 where-else 传递令牌，因为文档没有'这里没有 JS 示例
文档说要在header中传输令牌
@RyanH "However, you may also pass tokens in all Web API calls as a POST body parameter called token."
好的，所以在将令牌作为 token 参数发送到正文后，我收到 Content-Type CORS 错误，告诉我我不允许这样做，所以我将其删除：@987654333 @ 并且我收到一条回复，告诉我我的数据格式无效，因为它现在缺少内容类型，我也为我的 body 尝试了 JSON.stringify()。
@RyanH 正如我在回答中提到的，您需要对请求正文进行 url 编码。 Here is an example of that from the axios docs.

【解决方案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)
})

【讨论】：