nginx Axios将错误请求视为cors错误

rjzwgtxy  于 2024-01-06  发布在  Nginx
关注(0)|答案(1)|浏览(234)

我把nginx设置为代理,django设置为后端,react设置为前端

  1. server {
  2. listen 80;
  3. server_name example.com;
  4. root /usr/share/nginx/html/build/;
  5. index index.html index.htm;
  6. location / {
  7. proxy_pass http://localhost:8000/;
  8. add_header Access-Control-Allow-Origin *;
  9. add_header Access-Control-Allow-Credentials "true";
  10. add_header Access-Control-Allow-Headers '*';
  11. proxy_set_header Upgrade $http_upgrade;
  12. proxy_set_header Connection "upgrade";
  13. proxy_redirect off;
  14. }
  15. }

字符串
当向后端发送登录请求时,如果数据成功,则工作正常,但是当输入错误的凭据时,即使响应在后端日志中,它也会显示cors错误,并且它会说它返回了响应
axios代码:

  1. const axiosPostRequest = ({url, useToken=true, data}) => {
  2. if (url && !url.startsWith('http')){
  3. url = HOST.toString() + url
  4. }
  5. let options = {
  6. }
  7. if (useToken) {
  8. options['headers'] = {}
  9. options['headers']['Authorization'] = `${AUTH_HEADER} ${getAuthToken()}`
  10. }
  11. return axios.post(url, data, options)
  12. }


选项响应标头:

  1. HTTP/1.1 200 OK
  2. Server: nginx/1.24.0 (Ubuntu)
  3. Date: Tue, 02 Jan 2024 17:33:19 GMT
  4. Content-Type: text/html; charset=utf-8
  5. Content-Length: 0
  6. Connection: keep-alive
  7. Vary: origin
  8. Access-Control-Allow-Origin: *
  9. Access-Control-Allow-Headers: accept, authorization, content-type, user-agent, x-csrftoken, x-requested-with
  10. Access-Control-Allow-Methods: DELETE, GET, OPTIONS, PATCH, POST, PUT
  11. Access-Control-Max-Age: 86400
  12. Access-Control-Allow-Origin: *
  13. Access-Control-Allow-Credentials: true
  14. Access-Control-Allow-Headers: *


重复的头文件可能是由于安装了django cors头文件

ulmd4ohb

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 *)。

相关问题