我把nginx设置为代理,django设置为后端,react设置为前端
server {
listen 80;
server_name example.com;
root /usr/share/nginx/html/build/;
index index.html index.htm;
location / {
proxy_pass http://localhost:8000/;
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Credentials "true";
add_header Access-Control-Allow-Headers '*';
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_redirect off;
}
}
字符串
当向后端发送登录请求时,如果数据成功,则工作正常,但是当输入错误的凭据时,即使响应在后端日志中,它也会显示cors错误,并且它会说它返回了响应
axios代码:
const axiosPostRequest = ({url, useToken=true, data}) => {
if (url && !url.startsWith('http')){
url = HOST.toString() + url
}
let options = {
}
if (useToken) {
options['headers'] = {}
options['headers']['Authorization'] = `${AUTH_HEADER} ${getAuthToken()}`
}
return axios.post(url, data, options)
}
型
选项响应标头:
HTTP/1.1 200 OK
Server: nginx/1.24.0 (Ubuntu)
Date: Tue, 02 Jan 2024 17:33:19 GMT
Content-Type: text/html; charset=utf-8
Content-Length: 0
Connection: keep-alive
Vary: origin
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: accept, authorization, content-type, user-agent, x-csrftoken, x-requested-with
Access-Control-Allow-Methods: DELETE, GET, OPTIONS, PATCH, POST, PUT
Access-Control-Max-Age: 86400
Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: *
型
重复的头文件可能是由于安装了django cors头文件
1条答案
按热度按时间ulmd4ohb1#
抛出CORS错误的不是“axios”,而是您的浏览器。
CORS是一个浏览器端的安全结构。当你的浏览器去做一个“fetch”或“axios”调用时,它首先向URL发送一个OPTIONS请求,它最终会对这个URL发出一个GET/POST/PUT/.请求。
浏览器查看OPTIONS请求的响应头。这就是服务器告诉浏览器“从以下站点获取是安全的:.....”-换句话说,“从来自以下站点的网页调用此服务器的API是安全的:....."。这种机制是服务器如何能够告诉浏览器哪些站点/页面可以安全地调用API。
例如,银行的服务器会指示只有从银行的网站(https://mybank.com)调用API才是安全的。任何在其他地址(例如https://myfakebank.com)上创建网页的人都可以调用银行的API服务器,但浏览器会抛出CORS错误,因为虚假网页不会从“有效”网站提供服务。
因此,在您的情况下,请查看浏览器的开发工具的网络选项卡中OPTIONS调用的响应标题,并查看它是否在“输入错误凭据”的情况下给出适当的响应(即
Access-Control-Allow-Origin *
)。