DAY104 - 路飞学城(一）- CORS跨域资源共享和pycharm开发vue项目

一、CORS跨域资源共享

1.什么是CORS跨域资源共享

​ 为了解决跨域问题，就需要CORS。

​ CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

​ 整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

​ 因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

​ 跨域问题源于浏览器的一项安全策略，同源策略。当前的域的请求只允许朝当前域的网页发请求，如果向其他域发请求，请求可以正常发送，也会携带数据回来，但是浏览器会拦截数据。

​ 请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同。

​ 比如:我在本地上的域名是127.0.0.1:8000,请求另外一个域名：127.0.0.1:8001一段数据。

​ 浏览器上就会报错，个就是同源策略的保护,如果浏览器对javascript没有同源策略的保护，那么一些重要的机密网站将会很危险。

2.CORS具体使用

浏览器将CORS请求分成两类：

• 简单请求（simple request）

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

• 非简单请求（not-so-simple request）。

  ​ 浏览器发出CORS非简单请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。

  ​ 浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。

简单请求和非简单请求的区别？

# 1.满足条件不用
# 简单请求的满足条件
（1) 请求方法是以下三种方法之一：
HEAD
GET
POST
（2）HTTP的头信息不超出以下几种字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

# 也就是说，必须满足以上条件才行，如果POST请求但是JSON格式，就不是简单请求

# 凡是不同时满足上面两个条件，就属于非简单请求。

# 2.请求次数
简单请求：一次请求
非简单请求：两次请求，在发送数据之前会先发一次请求用于做“预检”，只有“预检”通过后才再发送一次请求用于数据传输。

# 关于“预检”
    请求方式：OPTIONS
    “预检”其实做检查，检查如果通过则允许传输数据，检查不通过则不再发送真正想要发送的消息
    

3.Django中CORS的使用

# 对单个视图的使用
class Course(APIView):
    def get(self, request):
        ret = Response('course')
        # 简单请求
        # '*'或'指定域名'
        ret['Access-Control-Allow-Origin'] = '*'

        # 非简单请求
        if request.method == "OPTIONS":
            #  '*'或'Content-Type'
            ret['Access-Control-Allow-Headers'] = '*'
        return ret
    
# 全局使用
# 放入中间件
from django.utils.deprecation import MiddlewareMixin


class Mymiddle1(MiddlewareMixin):
    def process_response(self, request, response):
        # 简单请求
        # '*'或'指定域名'
        response['Access-Control-Allow-Origin'] = '*'
        # 非简单请求
        if request.method == "OPTIONS":
            #  '*'或'Content-Type'
            response['Access-Control-Allow-Headers'] = '*'
        return response  

二、pycharm开发vue项目

1.安装VUE

1. 安装node.js
2. 安装vue脚手架
3. cmd命令:vue create 项目名

2.pycharm配置vue项目

• 安装vue.js插件

  setting--->plugins--->左下方install---->搜索vue.js---->下载--->重启pycharm

• 运行vue项目

  editconfigration--->+--->npm--->Scripts:serve

3.VUE项目结构

项目名
|---> node_modules:项目依赖(以后项目要传到git上,这个不能传)
|---> publish
|     |---> index.html  是总页面
|--- src :项目
|     |---> assets：静态资源
|     |---> components：视图组件中所需的小组件
|     |---> views：视图组件
|     |---> APP.vue：根组件，通过路由连接到视图组件
|     |---> main.js：总的入口js
|     |---> router.js：路由相关,所有路由的配置,在这里面
|     |---> store.js：vuex状态管理器
|---> package.json:项目的依赖,npm install 是根据它来安装依赖的

4.组件的格式

<template>
    html标签
</template>
<style>
    css语法
</style>
<script>
    js语法
</script>

5.使用组件的路由配置

<!-- App.vue -->
<!-- to="路由中配置路径" -->
<router-link to="/course">课程</router-link>

// router.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
// 1.导入视图组件
import Course from './views/Course.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
// 2.配置路由
    {
      path: '/course',
      name: 'course',
      // 方式一：直接导入
      // component: () => import('./views/Course.vue')
      // 方式二：导入后，再使用
      component:Course
    }
  ]
})

6.组件的数据与方法

<template>
    <div class="course">
        <h1>{{ msg }}</h1>
        <button @click="test">test</button>
    </div>
</template>

<script>
    export default {
        data: function () {
            return {
                msg: 'course',
            }
        },
        methods: {
            test() {
                alert('test')
            },
        },
    }

</script>

7.组件的axios(ajax)

• 安装axios

  npm install axios

• 使用

  ​ VUE

  # main.js
  import axios from 'axios'
  # 为了能全局使用axios
  # 把axios配置到全局变量中
  Vue.prototype.$http=axios
  # 把路径也放入全局变量
  Vue.prototype.$url ='http://127.0.0.1:8000'

  <template>
      <div class="course">
          <h1>{{ msg }}</h1>
          {{course}}
          <p v-for="c in course">
              {{c}}
          </p>
  
          <button @click="test">test</button>
      </div>
  </template>
  
  <script>
      export default {
          data: function () {
              return {
                  msg: 'course',
                  course: ['python', 'linux']
              }
          },
          methods: {
              test: function () {
                  // this指向VUE
                  let _this = this;
                  this.$http.request({
                      url: _this.$url + '/course/',
                      methods: 'get'
                  }).then(function (response) {
                      // then:成功时的回调函数
                      // 指向性的函数里的this指的是当前的函数，与上面的this不同
                      console.log(response.data)
                  }).catch(function (response) {
                      // catch:失败时的回调函数
                      console.log(response.data)
                  })
              }
          }
      }
  </script>

  DJANGO

  class Course(APIView):
      def get(self, request):
          return Response(['python', 'linux'])