Vue JS中axios出现Slack API CORS错误

Question

我正在用Capacitor JS&Nuxt JS与Slack API接口，这样我就可以设置我的Slack状态。我已经创建了一个Slack应用程序，并有一个xoxp-令牌，当我通过Postman发出POST请求到达端点时，它运行得很好，但从我的浏览器(localhost(和手机上运行的应用程序，我收到了以下CORS错误：

访问'XMLHttpRequesthttps://slack.com/api/users.profile.set'来自原点'http://localhost:3000'已被CORS策略阻止：飞行前响应中的访问控制允许标头不允许请求标头字段授权。

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

我正在尝试将D_4POST连接到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)
})