Python学习————跨域问题及解决

跨域问题及解决

# xss：跨站脚本攻击，cors：跨域资源共享，csrf：跨站请求伪造

# 1 同源策略：请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同.
# 2 CORS：跨域资源共享，允许不同的域来我的服务器拿数据
# 3 CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）
	只要同时满足以下两大条件，就属于简单请求
    （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---》非简单请求，非简单请求发两次，一次OPTIONS请求，一次真正的请求
# 4 后端处理，开启cors，跨域资源共享（在中间中写）
class MyMiddle(MiddlewareMixin):
    def process_response(self, request, response):
        response['Access-Control-Allow-Origin'] = '*'
        if request.method == "OPTIONS":
            # 可以加*
            response["Access-Control-Allow-Headers"] = "Content-Type"
            response["Access-Control-Allow-Headers"] = "authorization"

        return response
#5 在setting的中间件中配置


#6使用第三方，django-cors-headers
-pip install django-cors-headers
-注册app：'corsheaders',
-配置中间件：corsheaders.middleware.CorsMiddleware
-setting中配置：
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_METHODS = (
	'DELETE',
	'GET',
	'OPTIONS',
	'PATCH',
	'POST',
	'PUT',
	'VIEW',
)
CORS_ALLOW_HEADERS = (
	'authorization',
	'content-type',
)

前后台打通

#1 前台可以发送ajax的请求，axios
#2 cnpm install axios
#3 配置在main.js中
import axios from 'axios'   //导入安装的axios
//相当于把axios这个对象放到了vue对象中，以后用  vue对象.$axios
Vue.prototype.$axios = axios;
	
    
#4 使用（某个函数中）
      this.$axios.get('http://127.0.0.1:8000/home/home/'). 向某个地址发送get请求
      then(function (response) {  如果请求成功，返回的数据再response中
        console.log(response)
      }).catch(function (error) {
        console.log(error)
      })
        
#5 es6的箭头函数
function (response) { console.log(response)}
response=>{ console.log(response)}