介紹

# 以后只要前后端分離項(xiàng)目，都會(huì)出現(xiàn)跨域問(wèn)題，咱們要解決

# 同源策略
同源策略（Same origin policy）是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會(huì)受到影響?？梢哉f(shuō)Web是構(gòu)建在同源策略基礎(chǔ)之上的，瀏覽器只是針對(duì)同源策略的一種實(shí)現(xiàn)

請(qǐng)求的url地址,必須與瀏覽器上的url地址處于同域上：也就是[域名],[端口],[協(xié)議]相同.
http://127.0.0.1:8080
ftf://127.0.0.1:8080

比如:我在本地上的域名是127.0.0.1:8000,請(qǐng)求另外一個(gè)域名：127.0.0.1:8001一段數(shù)據(jù)

瀏覽器上就會(huì)報(bào)錯(cuò)，個(gè)就是同源策略的保護(hù),如果瀏覽器對(duì)javascript沒(méi)有同源策略的保護(hù),那么一些重要的機(jī)密網(wǎng)站將會(huì)很危險(xiǎn)

請(qǐng)求發(fā)送，服務(wù)的執(zhí)行，數(shù)據(jù)也正常返回，只是被瀏覽器攔截了

# 正因?yàn)橥床呗缘拇嬖?，咱們?xiě)前后端分離的項(xiàng)目，無(wú)法正常獲取到數(shù)據(jù)

# 解決跨域問(wèn)題：
?? ?1 ?jsonp 跨域（不了解）
? ? 2 ?跨域資源共享（CORS） ?后端技術(shù)
? ? 3 ?Nginx代理

# CORS：跨域資源共享
CORS需要瀏覽器和服務(wù)器同時(shí)支持，所有瀏覽器都支持該功能
只需要服務(wù)的處理即可：只需要在在響應(yīng)頭中加入固定的頭就實(shí)現(xiàn)cors---》比如在響應(yīng)頭中加入Access-Control-Allow-Origin='*'---->get請(qǐng)求就沒(méi)有跨域了---》但是put請(qǐng)求還會(huì)有

# cors的請(qǐng)求分兩種
?? ?-簡(jiǎn)單請(qǐng)求，瀏覽器直接發(fā)起
? ? -非簡(jiǎn)單請(qǐng)求，瀏覽器先發(fā)送要給options預(yù)檢請(qǐng)求，服務(wù)端允許，再發(fā)送真正的請(qǐng)求
# 什么是簡(jiǎn)單請(qǐng)求，什么是非簡(jiǎn)單請(qǐng)求
?? ?# 如果屬于下面，就是簡(jiǎn)單請(qǐng)求
? ? 1 請(qǐng)求方法是以下三種方法之一：
? ? ? ? HEAD
? ? ? ? GET
? ? ? ? POST
? ? ?2 HTTP的頭信息不超出以下幾種字段：
? ? ? ? Accept
? ? ? ? Accept-Language
? ? ? ? Content-Language
? ? ? ? Last-Event-ID
? ? ? ? Content-Type：只限于三個(gè)值application/x-www-form-urlencoded、multipart/form-data、text/plain

? ? ? ??
# 使用cors解決跨域，就是再響應(yīng)頭中加入固定的一些東西，專(zhuān)門(mén)寫(xiě)個(gè)中間件
?? ? ? ?res['Access-Control-Allow-Headers'] = 'token'
? ? ? ? res['Access-Control-Allow-Methods'] = 'DELETE'
? ? ?? ?res['Access-Control-Allow-Origin'] = 'http://192.168.1.252:8080'

### 補(bǔ)充：######
前端訪問(wèn)的后端地址，一定要準(zhǔn)確
?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-500562.html

自定義中間件，解決跨域問(wèn)題

##### common_mideleware.py
from django.utils.deprecation import MiddlewareMixin


### 自定義中間件解決跨域問(wèn)題---》以后其它框架都是這個(gè)原理---》django上有人做了
class CorsMiddleware(MiddlewareMixin):
    def process_response(self, request, response):
        if request.method == 'OPTIONS':
            response['Access-Control-Allow-Headers'] = 'token'
            response['Access-Control-Allow-Methods'] = 'DELETE'
        response['Access-Control-Allow-Origin'] = '*'
        return response
    
 ### 配置文件配置中間件
    MIDDLEWARE = [
        'utils.common_mideleware.CorsMiddleware'
    ]

django-cors-headers

####使用pip安裝
pip3 install django-cors-headers  -i  https://pypi.tuna.tsinghua.edu.cn/simple

#####添加到setting的app中
INSTALLED_APPS = (
	...
	'corsheaders',
	...
)
#### 添加中間件
MIDDLEWARE = [  
	...
	'corsheaders.middleware.CorsMiddleware',
	...
]
#### 4、setting下面添加下面的配置
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_METHODS = (
	'DELETE',
	'GET',
	'OPTIONS',
	'PATCH',
	'POST',
	'PUT',
	'VIEW',
)

CORS_ALLOW_HEADERS = (
	'XMLHttpRequest',
	'X_FILENAME',
	'accept-encoding',
	'authorization',
	'content-type',
	'dnt',
	'origin',
	'user-agent',
	'x-csrftoken',
	'x-requested-with',
	'Pragma',
	'token'，
    # 此處可以自定義,寫(xiě)自己定義的頭
)

django-cors-headers源碼

# 核心代碼再中間件的---》process_response  3.0.14 版本
class CorsMiddleware(MiddlewareMixin):
    def process_response(self, request, response):
        if (
            not conf.CORS_ALLOW_ALL_ORIGINS
            and not self.origin_found_in_white_lists(origin, url)
            and not self.check_signal(request)
        ):
            return response
        if conf.CORS_ALLOW_ALL_ORIGINS and not conf.CORS_ALLOW_CREDENTIALS:
            response[ACCESS_CONTROL_ALLOW_ORIGIN] = "*"
        else:
            response[ACCESS_CONTROL_ALLOW_ORIGIN] = origin
        if request.method == "OPTIONS":
            response[ACCESS_CONTROL_ALLOW_HEADERS] = ", ".join(conf.CORS_ALLOW_HEADERS)
            response[ACCESS_CONTROL_ALLOW_METHODS] = ", ".join(conf.CORS_ALLOW_METHODS) 
        return response

到了這里，關(guān)于跨域問(wèn)題詳解/django-cors-headers/django-cors-headers源碼的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！