news 2026/4/3 3:09:21

nginx解决跨域问题,包括options请求的跨域问题

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
nginx解决跨域问题,包括options请求的跨域问题

C:\tools\nginx-1.28.0\conf\nginx.conf文件,报错:Access to fetch at 'http://localhost/api-aa2-agent12/classes/courses' from origin 'http://localhost:3001' 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.

修改说明

为什么需要处理 OPTIONS 请求?

当浏览器发起跨域请求时,会先发送一个 OPTIONS 预检请求(preflight request)来检查服务器是否允许实际请求。如果 Nginx 不正确处理这个 OPTIONS 请求,浏览器就会报 CORS 错误。

主要改进:

  1. 单独处理 OPTIONS 请求,直接返回 204 状态码
  2. 所有 CORS 头添加always参数,确保在所有响应中都包含
  3. 增加了Authorization头的支持,允许传递 token

重新加载 Nginx 后,CORS 错误应该就解决了!

server { listen 80; server_name localhost; location /api-aa2-agent12/ { # 处理 OPTIONS 预检请求 if ($request_method = 'OPTIONS') { add_header 'Access-Control-Allow-Origin' '*' always; add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, PATCH, OPTIONS' always; add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type, Accept, Origin, User-Agent, DNT, Cache-Control, X-Mx-ReqToken, X-Requested-With' always; add_header 'Access-Control-Max-Age' 1728000 always; add_header 'Content-Type' 'text/plain; charset=utf-8' always; add_header 'Content-Length' 0 always; return 204; } # 设置允许跨域的域,* 表示允许任何域,也可以设置特定的域 add_header 'Access-Control-Allow-Origin' '*' always; # 允许的方法 add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, PATCH, OPTIONS' always; # 允许的头信息字段 add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type, Accept, Origin, User-Agent, DNT, Cache-Control, X-Mx-ReqToken, X-Requested-With' always; # 缓存时间 add_header 'Access-Control-Max-Age' 1728000 always; proxy_set_header X-Real-IP $remote_addr; proxy_set_header REMOTE-HOST $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-NginX-Proxy true; proxy_set_header Connection ''; proxy_http_version 1.1; chunked_transfer_encoding off; proxy_buffering off; proxy_cache off; proxy_pass http://192.168.31.141:1234/; } }

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/4/1 0:35:03

基于PLC的智能停车场自动控制系统设计

摘 要 本选题旨在通过应用PLC控制技术,设计一种高效、自动化的停车收费控制系统。该系统主要用于小型停车场的智能管理,能够实现自动计时计费等功能。系统由PLC控制器、车辆检测传感器、收费终端、显示屏等部分组成,PLC通过与各类传感器和…

作者头像 李华
网站建设 2026/3/26 8:08:44

改变习惯性 !=null 判空,只需一秒!

空指针异常是出现频率比较高的bug,在出现空指针时,很多小伙伴都是习惯性地加一个 !null 的判断,这个bug就解决了。当代码中频繁出现 !null 的判断时,我们就会很头疼,能不能高效、优雅地做这个判断?答案当然…

作者头像 李华
网站建设 2026/4/2 3:12:53

光伏电站发电量不达标?深挖逆变器电流监测的隐形损耗

2026 年初,国内光伏装机规模持续高速增长。国家能源局 2025 年 12 月发布的统计数据显示,我国太阳能发电装机容量已达 11.6 亿千瓦,同比增幅 41.9%,新增装机量再破纪录。但许多电站运营者面临着共同难题:明明配备了高效…

作者头像 李华
网站建设 2026/3/31 23:01:46

基于Java web的电影院选票系统

第3章 系统分析 为满足用户的需求,本章分析系统开发的可行性,将从技术和操作等方面来判断,然后通过需求分析、系统流程分析来确定电影院选票系统的功能[7]。 3.1 技术可行性分析 电影院选票系统在使用电脑和信息分析系统这些设计没有硬性要…

作者头像 李华
网站建设 2026/3/31 1:33:25

基于Spring boot食品安全信息管理系统

三 系统的设计 3.1 APP性能需求 (1)用户在安卓APP页面各种操作可及时得到反馈。 (2)该平台是提供给多个用户使用的平台,用户使用之前需要注册登录。登录验证后,用户才可进行各种操作[10]。 (3&a…

作者头像 李华
网站建设 2026/4/1 19:08:32

‌2026年新兴性能测试技术:面向云原生与AI原生时代的质量范式重构

作为2026年开年之际的软件测试从业者,你正站在一场深刻变革的交汇点上。性能测试已不再是“压测脚本监控图表”的简单组合,而是演变为融合AI决策、数字孪生仿真、体验量化与工程自动化的新质量基础设施。‌1. AI原生测试(AICT)&am…

作者头像 李华