初始化全局样式配置与前后端跨域问题

初始化样式

每个页面创建好时都会自带一些样式使我们的布局不能完全的顶到边缘，我们可以统一的配置将页面自带的样式修改成自己想要的

\(\bullet\) 创建一个css文件声明全局样式

body, h1, h2, h3, h4, h5, h6, p, table, tr, td, ul, li, a, form, input, select, option, textarea {
    margin: 0;
    padding: 0;
    font-size: 15px;
}
 
a {
    text-decoration: none;
    color: #333;
}
 
ul {
    list-style: none;
}
 
table {
    border-collapse: collapse; /* 合并边框 */
}

当我们需要朝后端发送请求时都需要写'http://127.0.0.1:8000'，我们可以配置在js中后期直接调用

\(\bullet\) 同样创建一个js文件

export default {
    BASE_URL:'http://127.0.0.1:8000/'
}

\(\bullet\) 当我们配置好后还不能直接使用需要在main.js中进行导入配置

// 去掉所有标签默认样式
import '@/assets/css/global.css'
 
// 全局配置
import settings from "@/assets/js/settings";
Vue.prototype.$settings=settings

跨域问题

\(\bullet\) 跨域问题出现的原因？

        - 同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现
请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同.
比如:我在本地上的域名是127.0.0.1:8000,请求另外一个域名：127.0.0.1:8001一段数据
浏览器上就会报错，这个就是同源策略的保护,如果浏览器对javascript没有同源策略的保护,那么一些重要的机密网站将会很危险

\(\bullet\) CORS基本流程

- 简单请求：

        浏览器发出CORS简单请求，只需要在头信息之中增加一个Access-Control-Allow-Origin字段

- 非简单请求：

        浏览器发出CORS非简单请求，会在正式通信之前，先发送一个options请求，称为”预检”请求。
        浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，如果运行，再发真正的请求

\(\bullet\) 什么是简单请求与非简单请求

- 简单请求请求方法是一下三种方式之一：

        HEAD、

        GET、

        POST

- 非简单请求的请求头信息超过以下几种字段：

        Accept

        Accept-Language

        Content-Langeuage

        Last-Event-ID

        Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

\(\bullet\) 第三方模块解决跨域问题

第一步：安装django-cors-headers模块

第二步：注册app

INSTALLED_APPS = [
    'corsheaders',
]

第三步：添加中间件

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
]

第四步：在配置文件中配置

# cors的配置
# 允许所有域
CORS_ORIGIN_ALLOW_ALL = True
# 允许的请求方式
CORS_ALLOW_METHODS = (
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
    'VIEW',
)
# 允许请求头带
CORS_ALLOW_HEADERS = (
    'accept-encoding',
    'authorization',
    'content-type',
    'origin',
    'user-agent',
    'x-csrftoken',
    'token'
)