解决跨域问题

如何解决跨域问题呢?

1.CORS 跨域

浏览器的基于访问安全的 同源策略:

协议、主机ip 和 端口port 都相同的两个地址是同源地址，否则是非同源地址

django后端可以借助django-cors-headers第三方库轻松解决跨域访问这个问题.

2.Django-cors-headers 扩展

作用:

解决 django 开发中遇到的跨域访问资源问题

我们为前端和后端分别设置了两个不同的域名

位置	域名
前端	127.0.0.1:8080
后端	www.meiduo.site (127.0.0.1:8000)

现在，前端与后端分处不同的域名，我们需要为后端添加跨域访问的支持.

我们使用 CORS 来解决后端对跨域访问的支持

使用 django-cors-headers 扩展:

参考文档https://github.com/ottoyiu/django-cors-headers/

2.1安装

# 虚拟环境-安装 django-cors-headers 解决跨域问题:
pip install django-cors-headers -i https://pypi.tuna.tsinghua.edu.cn/simple

2.2添加应用

settings.dev.py

INSTALLED_APPS = (
    ...
    # 添加 django-cors-headers 使其可以进行 cors 跨域
    'corsheaders',
    ...
)

2.3中间件设置

settings.dev.py

MIDDLEWARE = [
    ...
    # 添加 django-cors-headers 使其可以进行 cors 跨域,放在最上面注册
    'corsheaders.middleware.CorsMiddleware',
]

2.4添加白名单

settings.dev.py

# CORS跨域请求白名单设置
CORS_ORIGIN_WHITELIST = (
    'http://127.0.0.1:8080',
    'http://localhost:8080',
    'http://www.meiduo.site:8080',
)
CORS_ALLOW_CREDENTIALS = True  # 允许携带cookie

• 凡是出现在白名单中的域名，都可以访问后端接口

• CORS_ALLOW_CREDENTIALS 指明在跨域访问中后端是否支持对 cookie的操作.

2.4.如果在项目配置的时候你使用的不是ALLOWED_HOSTS = ['*'],那么才添加如下配置

给 dev.py 中的 ALLOWED_HOSTS 添加数据:

ALLOWED_HOSTS = ['api.meiduo.site', 
                 '127.0.0.1', 
                 'localhost', 
                 'www.meiduo.site']

小结:

• 第一个接口后端逻辑不难, 难的是流程, 也就是前端发送请求后, 后端如何处理
• 我们这里用到了跨域, 所以需要解决跨域问题.