普拉多VX

人生一路,不问来时,不知归期

0%

django drf nginx vue 跨域问题彻底解决方法

说明

跨域,跨域,跨域。重要的事说三遍,为啥以前解决方法不对呢?以前有测试域名,直接绑定好并且配置django-cors-headers即可。今天遇到情况是部署好django后,什么设置都了还是提示跨域问题!

问题

本地开发环境 vue.js url:http://localhost:8000 服务器在阿里与,ip:端口模式。解析了域名就不会提示,还有一个问题换搜狗浏览器也可以访问,chrome不行。

1
Access to XMLHttpRequest at 'http://39.99.35.80/api/v1/chain/stats' from origin 'http://localhost:8000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

解决方法

前期按照以前配置的django,直接使用python manage.py runserver 0.0.0.0:80 没问题。使用nginx代理后就会出现问题。

崩溃中!!!!于是各种找问题。

1.django配置

安装cors模块,切记,切记,要安装2.x版本 https://github.com/adamchainz/django-cors-headers/issues/579

1
pip install django-cors-headers== 2.5.3 # 3.0版本+nginx要踩坑

配置settings.py

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

CORS_ALLOW_CREDENTIALS = True # 指明在跨域访问中,后端是否支持对cookie的操作。
CORS_ORIGIN_ALLOW_ALL = True

CORS_ORIGIN_WHITELIST = (
'*'
)

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',
)



INSTALLED_APPS = [
.......
'corsheaders',

]


MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware', # 最好放第一行
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'corsheaders.middleware.CorsPostCsrfMiddleware', # 如果出现csrf,加这个
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

2.nginx配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
server {
listen 80;
server_name x.x.x.x;
keepalive_timeout 300;



location / {

client_max_body_size 100m;
proxy_http_version 1.1;
proxy_pass http://127.0.0.1:8000;
proxy_connect_timeout 300s;
proxy_read_timeout 300s;

proxy_buffer_size 1024k;
proxy_buffers 4 1024k;
proxy_busy_buffers_size 1024k;
proxy_temp_file_write_size 1024k;


}


}

参考