问题描述
我正在使用 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
}
}
}
}
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)
})