nginx跨域每次访问都会发送两次请求

1、我们在开发环境下运行,每一次请求,发送一次请求,后来有测试工程师说,为什么每次请求都会发送二次请求,我只点击了一次,却发送二次请求,为什么?

2、第一次发送的是OPTIONS请求,然后才是正常的请求,返回200

3、OPTIONS是一种“预检请求”,浏览器在处理跨域访问的请求时,会先判断请求为复杂请求,这样就会向服务器发送一条预检请求,根据服务器返回的内容浏览器判断服务器是否允许该请求访问。如果web服务器采用cors的方式支持跨域访问,在处理复杂请求时这个预检请求是不可避免的。

4、解决方法,一般这种现象是在Nginx环境下运行时出现的,那我们就要设置nginx相关的参数,来处理这个问题。

在这里插入图片描述


#设置一天的过期时间
add_header Access-Control-Max-Age 86400;

重启服务器,现在再次点击请求只发生一次了请求。

### 图片资源首次请求问题及解决方案 #### 一、图片资源问题概述 当一个网页尝试加载来自不同源(协议、名或端口不同的服务器)的图片资源时,可能会遇到问题。浏览器的安全机制会阻止这种行为,除非目标服务器明确允许该操作。这通常发生在开发环境中,尤其是在本地测试时更为常见。 #### 二、原因分析 图片资源首次请求失败的原因在于浏览器实施了严格的同源策略[^4]。即使后续请求可能成功,这是因为缓存的存在使得第二次请求不再触发预检请求(Preflight Request),从而绕过了检查。具体来说: - **初次请求**:浏览器发送 OPTIONS 请求作为预检,询问服务器是否支持特定类型的请求。 - **二次请求**:如果响应被缓存,则不会再次发出预检请求,因此能够正常获取资源。 #### 三、解决方案 ##### 方案一:配置 Nginx 设置 CORS 头信息 为了使图片资源能够在任何地方自由加载而不受限制的影响,可以在反向代理服务器如 Nginx 中添加相应的 HTTP 响应头部字段 `Access-Control-Allow-Origin` 来指定哪些站点可以访问资源[^2]。 ```nginx location /images/ { add_header 'Access-Control-Allow-Origin' '*'; } ``` 上述代码片段表示对于 `/images/` 下的所有静态文件都开放给任意来源的页面读取权限。 ##### 方案二:使用 JSONP 或者其他技术规避限制 虽然这种方法主要用于 AJAX 调用而非图像加载,但在某些场景下也可以考虑将图片转换成 Base64 编码字符串内嵌到 HTML 页面中,以此避开实际意义上的“外部链接”。 ##### 方案三:调整服务端 API 接口设计 确保每次返回图片数据的同时也附带必要的 CORS 相关头信息,这样客户端就可以合法地接收并展示这些内容了。例如,在 Flask 应用程序里可以通过如下方式设置全局中间件来实现这一点: ```python from flask import Flask, make_response app = Flask(__name__) @app.after_request def after_request(response): response.headers.add('Access-Control-Allow-Origin', '*') return response ``` 以上 Python 代码展示了如何利用 Flask 框架中的钩子函数自动为每一个响应附加合适的 CORS 配置项。 ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值