基于django(djangorestframework)---vue的跨域问题

0.跨域介绍

第一点：先介绍同源策略，只有同时满足下面三个条件，缺一不可，缺了就不是同源

协议相同/域名相同/端口相同---同源

# 协议不同--不同源
http://www.baidu.com
https://www.baidu.com

# 域名不同---不同源
https://www.7788.com:8787
https://www.alg.com:8787

# 端口号不同---不同源
https://www.7788.com:8787
https://www.7788.com:9999

# 协议/域名/端口相同---同源
https://www.7788.com:8787
https://www.7788.com:8787

看到这，你可能会想，拿我当太君吗?,这不是同一个网站吗... 没错也可以这样认为，只有同一个url才是同源。

第二点：跨域

这样一来不是坏事了嘛，我自己跟自己玩什么，所以才要跨域，我解释一下跨域的意思

前提：A网站向B网站发起请求

a. 如果B网站，给A网站，发来的请求头里面，添加一个，headers={"Access-Control-Allow-Origin":'A网站的url'}，这就是跨域了。

b. 只要添加以后，A从B获得的数据，可以正常的，显示在自己的网站上，

c.如果B没有给A添加这么一个东西，那A可以正常获取数据(正常请求，以便获得数据)，但是在响应回去的路上，会被浏览器拦截，数据无法展示在A的网站上，浏览器拦截的理由是：同源机制

ps:添加这个头，只是简单的请求，

简单请求：

1.只有以下三种请求:
HEAD，GET，POST
2.请求头里面只能是：
Accept
Accept-Language
Content-Language
Content-Type
3、Content-Type的值仅限于下列三者之一
text/plain
multipart/form-data 文件上传时要使用的数据类型
application/x-www-form-urlencoded 默认的格式

复杂请求：

如果是复杂请求，跨域的时候，浏览器会自动发一个options，确保web服务器支持复杂请求跨域访问。这也就是为什么，有的请求你可以看到会有两次请求记录

一.前端Vue初始化:

删除HelloWord组件的相关内容

二.前端跨域配置:

1.在src目录下创建settings.js站点开发配置文件：

export default {
  host:"http://127.0.0.1:8000",
}

2.在main.js中引入:

import settings from "./settings"
Vue.prototype.$settings = settings;  

3.前端安装axios:

npm i axios -S --registry https://registry.npm.taobao.org

4.在main.js中引用 axios插件:

import axios from 'axios'; // 从node_modules目录中导入包
// 客户端配置是否允许ajax发送请求时附带cookie，false表示不允许
axios.defaults.withCredentials = false;

Vue.prototype.$axios = axios; // 把对象挂载vue中

5.在config/index.js中配置域名

// Various Dev Server settings
    host: '127.0.0.1', // can be overwritten by process.env.HOST

6.如果不想要路由后面带#的话，在router/index.js里面，配置一下

// 配置mode: 'history',

export default new Router({
// 配置mode: 'history',
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    }
  ]
})

三. 后端跨域配置:

1.在settings.py文件中添加，允许访问的路径

ALLOWED_HOSTS = [
    '127.0.0.1'
]

2.安装跨域模块

pip3 install django-cors-headers -i https://pypi.douban.com/simple/

3.注册app

INSTALLED_APPS = (
    ...
    'corsheaders',
    ...
)

4.中间件设置【最好写在第一个位置】

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware', #放在中间件的最上面，就是给响应头加上了一个响应头跨域
    ...
]

5.需要添加白名单，确定一下哪些客户端可以跨域。

# CORS组的配置信息
CORS_ORIGIN_WHITELIST = (
    #'127.0.0.1:8080', #如果这样写不行的话，就加上协议(http://127.0.0.1:8080，因为不同的corsheaders版本可能有不同的要求)
    'http://127.0.0.1:8080',
)

CORS_ALLOW_CREDENTIALS = False  # 是否允许ajax跨域请求时携带cookie，False表示不用，我们后面也用不到cookie，所以关掉它就可以了，以防有人通过cookie来搞我们的网站

6. 参数配置(默认是这个参数，添加上保险一点)

CORS_ORIGIN_ALLOW_ALL = True
# 实际请求所允许的请求方式列表。默认为：
CORS_ALLOW_METHODS = (
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
    'VIEW',
)
# 发出实际请求时可以使用的非标准HTTP标头的列表。默认为:
CORS_ALLOW_HEADERS = (
    'XMLHttpRequest',
    'X_FILENAME',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
    'Pragma',
)

四. 跨域配置到此完成，前端发送请求，向后端获取数据

1. 前端发送axios向后端要数据(后端接口自己写即可)

<template>
  <div>
    <ul>
      <li v-for="(values,index) in student_list" :key="values.id">{{ values.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Me",
  data() {
    return {
      student_list: []
    }
  }, methods: {
    get_student_data() {
      this.$axios.get(`${this.$settings.host}/stu/student/`)
        .then((res) => {
          this.student_list = res.data
        })
        .catch((error) => {

        })
    }
  },
  created() {
    this.get_student_data();
  }
}
</script>

<style scoped>

</style>

2. 运行效果