day10 Vue跨域问题的解决

1.理解跨域，什么是跨域

前端对Cross-Origin Resource Sharing 问题(CORS，中文又称'跨域')应该很熟悉了。众所周知出于安全的考虑，浏览器有个同源策略，对于不同源的站点之间的相互请求会做限制（跨域限制是浏览器行为，不是服务器行为。）。

跨域一句话的理解就是：服务端和请求端的地址不一样。

2. 同源的判定（同协议同域名端头）

以[http://www.example.com/dir/page.html为例，以下表格指出了不同形式的链接是否与其同源：（原因里未申明不同的属性即说明其与例子里的原链接对应的属性相同）]

链接 结果 原因

http:// www.example.com /dir/page2.html 是 同协议同域名同端口

http:// www.example.com /dir2/other.html 是 同协议同域名同端口

http://www.example.com: 81/dir/other.html 否 端口不同

https://www.example.com/dir/other.html 否 协议不同端口不同

http:// en.example.com/dir/other.html 否 域名不同

http:// example.com/dir/other.html 否 域名不同（要求精确匹配）

http:// v2.www.example.com/dir/other.html 否 域名不同（要求精确匹配）

3. 服务器运行跨域配置

3.1 在day08（要跨域的）目录下安装 django-cors-headers

image.png

pip install django-cors-headers 

3.2 添加到已安装的应用程序中的day08/settings.py文件

INSTALLED_APPS  =（
     ... 
    ' corsheaders '，
     ... 
）

3.3 添加中间件类来收听响应day08/settings.py

MIDDLEWARE  = [
    ... 
    # 跨域请求中间件
    'corsheaders.middleware.CorsMiddleware'，
    ' django.middleware.common.CommonMiddleware'，
     ... 
]

3.4 跨域配置在day08/settings.py最下面添加

# 跨域允许的请求方式，可以使用默认值，默认的请求方式为:
# from corsheaders.defaults import default_methods
CORS_ALLOW_METHODS = (
    'GET',
    'POST',
    'PUT',
    'PATCH',
    'DELETE',
    'OPTIONS'
)

# 允许跨域的请求头，可以使用默认值，默认的请求头为:
# from corsheaders.defaults import default_headers
# CORS_ALLOW_HEADERS = default_headers

CORS_ALLOW_HEADERS = (
    'XMLHttpRequest',
    'X_FILENAME',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
    'Pragma',
)

# 跨域请求时，是否运行携带cookie，默认为False
CORS_ALLOW_CREDENTIALS = True
# 允许所有主机执行跨站点请求，默认为False
# 如果没设置该参数，则必须设置白名单，运行部分白名单的主机才能执行跨站点请求
CORS_ORIGIN_ALLOW_ALL = True