Django+vue前后端分离项目的跨域问题

用网上下的iview模板改造成前端，和后端Django项目分离，后端写了一个简单的接口测试请求
前端：

  methods:{
    test() {
      this.$http.get('http://127.0.0.1:8000/test?test=' + this.formItem.input)
        .then((response) => {
          let res = JSON.parse(response.bodyText)
          console.log(res['msg'])
          alert(res['msg'])
        })
    }
  }

后端：

@require_http_methods(["GET"])
def test(request):
    str = request.GET.get('test')
    response = {}
    response['msg'] = str + 'success'
    return JsonResponse(response)

浏览器报错：Cannot read property ‘get’ of undefined
通过引入vue-resource解决：
1、安装vue-resource到项目中，找到当前项目

            输入：npm install vue-resource --save

2、安装完毕后，在main.js中导入，如下所示：

    import  VueResource  from 'vue-resource'

       Vue.use(VueResource)

参考链接

浏览器报错变为No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

查到了多种解决方案，解决我的问题的方案如下：

1、 安装django-cors-headers

pip install django-cors-headers

2、 配置settings.py文件

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware',  // 添加
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
 
CORS_ORIGIN_ALLOW_ALL = True   // 添加

参考链接

至此问题解决