luffy后端之跨域corf的解决方法

跨域CORS

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

window 系统: C:\Windows\System32\drivers\etc\host

linux/mac系统: /etc/hosts

位置	域名
前端	www.luffycity.cn
后端	api.luffycity.cn

编辑/etc/hosts文件，可以设置本地域名

在文件中增加两条信息

127.0.0.1   api.luffycity.cn
127.0.0.1   www.luffycity.cn

通过浏览器访问drf项目,会出现以下错误信息

可以通过settings的ALLOWED_HOSTS,设置允许访问

# 设置哪些客户端可以通过地址访问到后端
ALLOWED_HOSTS = [
    'api.luffycity.cn',
    'www.luffycity.cn',
    'localhost',  # 实际开发的时候不会写上localhost和127.0.0.1的
    '127.0.0.1',
]

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

否则前端无法使用axios无法请求后端提供的api数据

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

使用django-cors-headers扩展

在 Response(headers={"Access-Control-Allow-Origin":'客户端地址/*'})

官方文档:https://github.com/ottoyiu/django-cors-headers/

安装:

pip install django-cors-headers

1.添加应用

INSTALLED_APPS = (
    ...
    'corsheaders',
    ...
)

2.中间层设置【必须写在第一个位置】

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    ...
]

3.添加白名单

# CORS组的配置信息
CORS_ORIGIN_WHITELIST = (
    '127.0.0.1:8080',
    'localhost:8080',
    'www.luffycity.cn:8080'
)
CORS_ALLOW_CREDENTIALS = True  # 允许ajax跨域请求时携带cookie

　　完成了上面的步骤，我们就可以通过后端提供数据给前端使用ajax访问了