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)}