news 2026/10/28 1:42: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/10/26 22:56:57

实战笔记:S7-1200玩转五轴伺服的骚操作

西门子S7-1200控制5轴伺服程序案例。S7-1200控 制5轴伺服程序案例。1.PTO伺服轴脉冲定位控制功能应用速度模式应用扭矩模式应用。 2.程序为结构化编程,每一功能为模块化设计,具有一个项目都有的功能:自动_手动_单步_暂停后原位置继续运行_轴断电保持_报警功能_气缸运行及报警. …

作者头像 李华
网站建设 2026/10/27 9:12:15

基于springboot开发的c语言自学交流平台_iq8ra1w4

目录平台概述核心功能技术架构特色亮点适用场景开发技术核心代码参考示例1.建立用户稀疏矩阵,用于用户相似度计算【相似度矩阵】2.计算目标用户与其他用户的相似度总结源码文档获取/同行可拿货,招校园代理 :文章底部获取博主联系方式!平台概述…

作者头像 李华
网站建设 2026/10/27 9:12:16

基于springboot框架的高校志愿服务管理系统_68e63n7s

目录高校志愿服务管理系统摘要开发技术核心代码参考示例1.建立用户稀疏矩阵,用于用户相似度计算【相似度矩阵】2.计算目标用户与其他用户的相似度总结源码文档获取/同行可拿货,招校园代理 :文章底部获取博主联系方式!高校志愿服务管理系统摘要…

作者头像 李华
网站建设 2026/10/26 23:36:31

微信小店的历史

微信小店的历史上有多个版本和阶段:最早版本:2014年5月29日,微信公众平台正式推出“微信小店”,主要依托公众号,提供电商功能(如商品添加、订单管理等),适用于认证服务号。中间阶段&…

作者头像 李华
网站建设 2026/10/27 9:14:43

污水处理厂沉淀池 - V 型滤池控制系统:基于 S7 - 300 与组态王实现

基于S7-300和组态王污水处理厂沉淀池-V型滤池控制系统 带解释的梯形图程序,接线图原理图图纸,io分配,组态画面在污水处理厂的运作中,沉淀池与 V 型滤池的精准控制至关重要。本文将探讨如何基于 S7 - 300 可编程逻辑控制器&#xf…

作者头像 李华
网站建设 2026/10/27 9:30:34

jQuery Nice Validator 新手教程

插件:jQuery Nice Validator 加载:通过模块名 validator 和 validator-lang 初始化入口:在表单通用绑定中调用 form.validator 关键点: form.validator($.extend({...}, form.data("validator-options") || {})) rules…

作者头像 李华