背景
续上次一的实践[https://www.jianshu.com/p/a490a890eff9]
进行前后端开发适合,遇到的跨域问题。后来仔细的再调试一下接口的时候,发现了一个小细节的问题,好像点一次提交都会自动提交两次的执行两次!
具体如图示:
第一次提交:
提交的方式:
Request URL:http://xxxxxxxxx:35056/api/user/login/
Request Method:OPTIONS
Status Code:200 OK
Remote Address:xxxxxxxxxxxxxxxxxxxx:35056
Referrer Policy:no-referrer-when-downgrade
接口请问返回结果:
{
"return_descript": "登入帐号不允许为空",
"return_data": {},
"return_code": -1
}
也就是说后端没有收到提交的相关的POST参数信息。
第二次提交:
提交的方式:
Request URL:http://xxxxxxxxxxxx:35056/api/user/login/
Request Method:POST
Status Code:200 OK
Remote Address:xxxxxxxxx:35056
Referrer Policy:no-referrer-when-downgrade
接口请问返回结果:
{
"return_descript": "登入成功!",
"return_data": {},
"return_code": 0
}
也就是说后端有收到提交的相关的POST参数信息。
所以这个地方应该是bottle对Request Method:OPTIONS处理上有点问题!
尝试解决:
加上对应的头部信息。
const install = function (Vue) {
// 配置baseurl
const ajaxUrl = env === 'development'
? 'http://xxxxxxxxx:35056' : 'http://xxxxxxxx:35056'
// 配置axios
let instance = axios.create({
baseURL: ajaxUrl,
timeout: 300,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
尝试再次请求处理!看看发现确实Request Method:OPTIONS的提交方式已经不再出现了!可惜好像后端接受不到对应的数据了!!