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

### 图片资源首次请求跨域问题及解决方案 #### 一、图片资源跨域问题概述 当一个网页尝试加载来自不同源（协议、域名或端口不同的服务器）的图片资源时，可能会遇到跨域问题。浏览器的安全机制会阻止这种行为，除非目标服务器明确允许该操作。这通常发生在开发环境中，尤其是在本地测试时更为常见。 #### 二、原因分析 图片资源首次请求失败的原因在于浏览器实施了严格的同源策略[^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 配置项。 ---