我使用django-cors-headers 3.1.1来处理Django后端和Javascript前端应用程序之间的请求和响应。传输是非安全的(即http,而不是https)。
当本地托管时,一切正常。但是在服务器上部署后,我停止看到CORS标头。
以下是开发中的标头:
以及生产中的标头:
错误消息:
django-cors-headers的设置现在在开发和生产中是相同的:
在客户端,我尝试添加"Access-Control-Request-Method": "PUT"头部,但浏览器拒绝了此操作。客户端调用中没有任何异常。
此外,我第一次尝试在Amazon AWS EC2上进行主机托管,所以可能有一些我不知道的必需的AWS配置。例如,是否需要使用API网关启用CORS? 文档没有这样说明(“如果您正在使用API Gateway导入API,则可以使用OpenAPI文件设置CORS支持”)。
前端应用程序托管在具有以下CORS策略的S3存储桶中:
当本地托管时,一切正常。但是在服务器上部署后,我停止看到CORS标头。
以下是开发中的标头:
![enter image description here](https://istack.dev59.com/GCo6s.webp)
![enter image description here](https://istack.dev59.com/L44HL.webp)
Access to XMLHttpRequest at 'http://[HOST_IP]/api/assets/' from origin 'http://my_custom_domain.eu' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
我的nginx配置如下:
server {
listen 80;
server_name [HOST_IP];
location / {
include proxy_params;
proxy_pass http://unix:/home/ubuntu/[path_to_app]/app.sock;
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, PUT, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Max-Age' 86400;
if ($request_method = 'OPTIONS') {
add_header 'Content-Type' 'text/html; charset=utf-8';
add_header 'Content-Length' 0;
return 204;
}
if ($request_method = 'PUT') {
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
}
if ($request_method = 'GET') {
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
}
}
location /static/ {
autoindex on;
alias /home/ubuntu/[path_to_app]/site/static/;
}
}
django-cors-headers的设置现在在开发和生产中是相同的:
INSTALLED_APPS = (
…
"corsheaders",
…
)
MIDDLEWARE = [
…
"corsheaders.middleware.CorsMiddleware",
"django.middleware.common.CommonMiddleware",
…
]
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_METHODS = ['DELETE','GET','OPTIONS','PATCH','POST','PUT']
在客户端,我尝试添加"Access-Control-Request-Method": "PUT"头部,但浏览器拒绝了此操作。客户端调用中没有任何异常。
axios({
method: 'put',
url: `${this.backendUrl}/api/assets/`,
data: formData,
headers: {
'Content-Type': 'application/octet-stream',
}
})
此外,我第一次尝试在Amazon AWS EC2上进行主机托管,所以可能有一些我不知道的必需的AWS配置。例如,是否需要使用API网关启用CORS? 文档没有这样说明(“如果您正在使用API Gateway导入API,则可以使用OpenAPI文件设置CORS支持”)。
前端应用程序托管在具有以下CORS策略的S3存储桶中:
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
我在这里缺少什么?是否需要一些必要的服务器端(尤其是nginx)配置?
我尝试了其他一些解决方案:
我怀疑请求/响应来源是否正确(例如APPEND_SLASH变量)。但如果是这种情况,本地托管时不应该引发错误吗?
我还尝试设置代理头,就像this question中所述,但由于不太了解nginx,这注定会失败。