背景

续上次一的实践[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

image.png

接口请问返回结果：

{
    "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

image.png

接口请问返回结果：

{
    "return_descript": "登入成功！",
    "return_data": {},
    "return_code": 0
}

也就是说后端有收到提交的相关的POST参数信息。

所以这个地方应该是bottle对Request Method:OPTIONS处理上有点问题！

尝试解决：

图片.png

加上对应的头部信息。

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的提交方式已经不再出现了！可惜好像后端接受不到对应的数据了！！