当前位置:首页 > 技术文章 > 正文内容

NGINX常规CORS错误解决方案(nginx报错an error occurred)

arlanguage4个月前 (12-30)技术文章46

CORS错误

CORS(Cross-Origin Resource Sharing,跨源资源共享)是一种机制,它使用额外的HTTP头部来告诉浏览器允许一个网页运行的脚本从不同于它自身来源的服务器上请求资源(例如字体、JavaScript、CSS等)。这是一种安全特性,用于帮助减少跨站请求伪造(CSRF)攻击的风险。

CORS 跨域请求的工作流程

  1. 浏览器发起跨域请求:当一个网页尝试从不同的源(协议、域名、端口中任意一者不同)加载资源时,浏览器会自动添加一些HTTP头部信息(如Origin),并将请求发送到服务器。
  2. 服务器响应CORS头部:服务器在响应中通过添加CORS相关的HTTP头部来指示浏览器是否允许该跨域请求。这些头部包括:
  3. Access-Control-Allow-Origin:指定哪些网站可以参与跨域资源共享。
  4. Access-Control-Allow-Methods:明确告知客户端,实际请求所允许使用的HTTP方法。
  5. Access-Control-Allow-Headers:在预检请求中,告知客户端在实际请求中,哪些HTTP头信息会被支持。
  6. Access-Control-Allow-Credentials:表明是否允许发送Cookie。
  7. Access-Control-Max-Age:指定预检请求的结果能够被缓存多久。
  8. 浏览器判断响应:浏览器检查响应中的CORS头部,决定是否接受响应。如果服务器返回的CORS头部不允许当前源进行跨域请求,浏览器会拒绝响应,并可能抛出错误。

常见的CORS错误

  • Access-Control-Allow-Origin 不匹配:请求的Origin头部与服务器响应的Access-Control-Allow-Origin不匹配。
  • 缺少CORS头部:服务器没有返回任何CORS相关的HTTP头部。
  • 预检请求失败:对于复杂请求(如使用PUT、DELETE或PATCH方法,或发送自定义头部),浏览器会首先发送一个OPTIONS请求作为“预检”。如果服务器没有正确响应预检请求,则实际请求不会被发送。


NGINX配置

进入nginx/conf/vhosts找到你域名配置文件增加下方的代码即可。


	add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
        add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
  


扫描二维码推送至手机访问。

版权声明:本文由AR编程网发布,如需转载请注明出处。

本文链接:http://www.arlanguage.com/post/558.html

分享给朋友:

“NGINX常规CORS错误解决方案(nginx报错an error occurred)” 的相关文章

跨域的原因以及解决方案

# 为什么会产生跨域问题浏览器限制,目前所有浏览器都实现了同源策略规范。请求方式Type为xhr。如果非xhr,如json,script则也不会存在跨域问题请求方与服务方的源不同,即跨域,包括:协议不同域名不同端口不同同时满足三个条件才有可能产生跨域问题。# 解决方案对于浏览器限制的解决方案-关闭浏...

Nginx:为什么高性能?Master&worker如何配合?负载均衡了解吗?

1. Nginx架构及工作流程Nginx真正处理请求业务的是Worker之下的线程。worker进程中有一个ngx_worker_process_cycle()函数,执行无限循环,不断处理收到的来自客户端的请求,并进行处理,直到整个Nginx服务被停止。当一个 worker 进程在 accept()...

为何说捣腾 Nginx 少不了 Nginx-ui ?还自带 GPT 助手?

大家好,很高兴又见面了,我是"高级前端进阶",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发!什么是 Nginx UINginx UI 是一个基于 Web 的管理界面,旨在简化 Nginx 服务器的管理和配置。Yet another N...

一文教会你如何使用 iLogtail SPL 处理日志

作者:阿柄随着流式处理的发展,出现了越来越多的工具和语言,使得数据处理变得更加高效、灵活和易用。在此背景下,SLS 推出了 SPL(SLS Processing Language) 语法,以此统一查询、端上处理、数据加工等的语法,保证了数据处理的灵活性。iLogtail 作为日志、时序数据采集器,在...

Nginx从入门到放弃03-Nginx调优

一、调优的必要性在聊调优之前,我们先要知道为何调优,业务运行和调优的关系。笔者把自己总结的文档分为几遍,合集在 https://g.xgss.net/nginx/业务运行:线上业务正常运行,承载了公司业务。 监控业务:通过监控业务对线上业务进行监控,及时发现问题。 优化业务:通过监控分析,发现业务问...

Nginx 最全操作——nginx常用命令(3)

上一篇文章我们设置了nginx的配置,这里简单介绍一下nginx的常用命令。几个常用的命令:nginx -s reload # 向主进程发送信号,重新加载配置文件,热重启 nginx -s reopen # 重启 Nginx nginx -s stop # 快速关闭 nginx -s qu...