django+vue项目跨域问题

1.开发调式问题，路由指向（跨域问题）
（1）前端vue，修改config目录下面的index.js

修改：
proxyTable: {
‘/’: {
target: ‘http://127.0.0.1:8000/’, ##指向后端接口：地址加端口
changeOrigin: true,
pathRewrite: {
‘^/api’: ‘’ ##将所有的/api 转化成/ ,所以前端接口写上/api/****,指向接口
}
}
},

（2）vue方法里面
get_data(){
let that = this
that.$axios({
method: “post”,//指定请求方式
url: “/api/get_data/”,//请求接口（相对接口，后面会介绍到）
data: {
“isDebug”:“1”, //给后端传送的数据
}
})
.then(function(res){
that.tableData=res.data[“data”] //后端发送给前端的数据
console.log(res.data)
})
.catch(function(err){
console.log(“ooooooo”)
　　　　　　　　　　//请求失败或者接口返回失败或者.then()中的代码发生错误时执行
})
}

（3）后端设置，这里用的是django框架（要引入模块django-cors-headers）
整个项目的setting.py 文件中修改
INSTALLED_APPS = [
。。。。
‘corsheaders’,
。。。。
]
MIDDLEWARE=[
…
#‘django.middleware.csrf.CsrfViewMiddleware’, ###注释此行
…
]

CORS_ALLOW_METHODS = (
‘DELETE’,
‘GET’,
‘OPTIONS’,
‘PATCH’,
‘POST’,
‘PUT’,
‘VIEW’,
)

CORS_ALLOW_HEADERS = (
‘XMLHttpRequest’,
‘X_FILENAME’,
‘accept-encoding’,
‘authorization’,
‘content-type’,
‘dnt’,
‘origin’,
‘user-agent’,
‘x-csrftoken’,
‘x-requested-with’,
‘Pragma’,
)

CORS_ORIGIN_ALLOW_ALL = True

（4）后端url配置：
import api_test.urls

urlpatterns = [
url(r’^admin/’, admin.site.urls),
url(r’^api_test/’, include(api_test.urls)),
url(r’^$’, TemplateView.as_view(template_name=“index.html”)), ###打包上线后指向问题

]

2.侧边栏继承
修改src/router/index.js文件
如下：

import Vue from ‘vue’

import Router from ‘vue-router’
import HelloWorld from ‘@/components/HelloWorld’ ##这是子页面的vue文件路径
import index from ‘@/components/index’ #这是子页面的vue文件路径
import home from ‘@/components/Home’ #这是主页面的vue文件路径（侧边栏的）
Vue.use(Router)

export default new Router({
routes: [

{
  path: '/',
  name: 'Home',
  component: home,
  children:[                          #####此处设置成子路径
    
      {
      path: 'index',
      name: 'index',
      component: index
    },
    {
      path: 'helow',
      name: 'HelloWorld',
      component: HelloWorld
    },
  
  ]
  
},

]
})