报错：

前台控制台报一下错：

Access to XMLHttpRequest at 'http://127.0.0.1:8000/api/chouti/book/' from origin 'http://localhost:8

修改的地方有：

后端：

备注：这里采用的python django进行开发的（只适用这种环境 思路可以借鉴）

Django 报错，跨域请求出现问题。

在settings.py中添加

#设置可跨域范围（注意位置）

CORS_ALLOW_CREDENTIALS = True

CORS_ORIGIN_ALLOW_ALL = True

#定义跨域中间件（注意位置）

'corsheaders.middleware.CorsMiddleware',

前端：

备注：这里采用的是vue2进行开发，还需要特别说明的是我对axsio进行了封装

即大家常说的request.js 封装代码如下：

import Vue from 'vue'import axios from "axios";Vue.config.productionTip=false;
Vue.prototype.axios=axios;const http=axios.create({baseURL:"http://127.0.0.1:8000/api", #这是对api所在的服务进行请求获得数据timeout:10000,withCredentials: true,headers: {'Content-Type': 'application/json; charset=utf-8'}
});
http.interceptors.request.use(function (config) {return config;},function (error) {return Promise.reject(error)});http.interceptors.response.use(function (response) {return response;},function (error) {return Promise.reject(error)});
export default http

对api也进行封装（如有多个按照这种模式往下写即可）

import http from "@/axsio/axsio";
export  const  getdata=()=>{return http.get('/chouti/book/')#这是对我们要请求的接口的详细地址
}

在vue.config.js中加入了这些代码：

module.exports={devServer:{proxy:{'/api':{target:"http://127.0.0.1:8000/api",changeOrigin:true,pathRewrite:{'/api':""}}}}
}

在main.js中引入这一行

axios.defaults.baseURL='/api'; //对与跨域问题 用vue.config.js解决 这是重要代码