python web（bottle框架）知行合一之-简单知识付费平台-”全栈“实践(21)----关于axios和bottle结合跨域问题整理

python web（bottle框架）知行合一之-简单知识付费平台-”全栈“实践(21)----关于axios和bottle结合跨域问题整理

PS：笔记只是为了更好表达我怎么语言表述，有些时候可能难免废话一推！
因知识有限, 如有错误, 欢迎指正！

问题

在处理跨域问题上，从封装axios开始，就开始遇到一些比较奇怪的问题。

可是最终和之前遇到的跨域问题不一样》

1：https://www.jianshu.com/p/a490a890eff9
2：https://www.jianshu.com/p/dd76c8b9b22a

而且不是需要想之前那种方式进行各种的修改即可。

关于axios简单封装如下：

import axios from 'axios'
let userAgentInfo = navigator.userAgent
let isiOS = !!userAgentInfo.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios终端
import qs from 'qs';
let HOST = 'http://127.0.0.1:8188' //默认是写在了index.html中，不过一般不会写在那

let http = axios.create({
  baseURL: HOST + '/api/',
  timeout: 10000,
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/x-www-form-urlencoded'
    // 'Authorization': 'Bearer ' + TOKEN,
    // 'InUrl': INURL,
    // 'IsIos': isiOS
  }
})
export default {
  get (url) {
    return new Promise((resolve, reject) => {
      http.get(url).then(res => {
        resolve(res.data)
      }).catch(error => {
        if (error.response) {
          resolve(error.response.data)
        } else {
          reject(error)
        }
      })
    })
  },
  post (url, params) {
    console.log(params)
    return new Promise((resolve, reject) => {
      console.log('aaaa',params)
      http.post(url, params).then(res => {
        resolve(res.data)
      }).catch(error => {
        if (error.response) {
          resolve(error.response.data)
        } else {
          reject(error)
        }
      })
    })
  }
}

调用如下：

 getData () {

//        var params = new URLSearchParams();
//        params.append('page_num', '4');
        this.$http.get('v1/course/get/?page_num=3').then(
//        this.$http.post('v1/course/get/',params).then(
          res => {
            this.$vux.loading.hide()


            if (res.return_code == '0000') {

              console.log('请求本地结果')
              console.log(res)

              if (this.page == 1) {
                this.kecheng_lists = res.return_data.data
                console.log(this.kecheng_lists)
                this.setState({
                  page_show: true,
                  init: true,
//                  swiper_list: res.data.swiper_list,
//                  rec_hot: res.data.rec_hot,
//                  share: res.data.share
                })
//                this.$wechat.config(res.data.wx_config)
//                this.$wechat.ready(() => {
//                  this.set_share()
//                })
              } else {

              }
            } else {
              this.setState({
                loading: false,
                load_err: true,
                load_more_tip: '加载失败，点击重试'
              })
            }
          },
          fail => {
            this.$vux.loading.hide()
          }
        )

而bottle后端仅仅只需要添加跨域支持即可：

@hook('after_request')
# @allow_cross_domain
def enable_cors():
    """
    钩子函数，处理请求路由之后需要做什么的事情
    :return:
    """
    response.headers['Access-Control-Allow-Origin'] = '*'
    # response.headers['Access-Control-Allow-Credentials'] = 'true'

在注释这个 response.headers['Access-Control-Allow-Origin'] = '*'情况下：
会出现跨域问题：

image.png

开启的情况下，请求正常：

get请求

post请求

前端取消这些请求头也不会有影响