平时开发网页时，经常遇到资源加载慢的问题。为了提升速度，浏览器会把一些静态资源比如图片、JS 文件存在本地缓存里，下次再访问就直接从缓存读取，省去了网络请求的开销。但当你发起一个跨域请求时，比如前端调用另一个域名下的 API 或加载外站的脚本，这时候还会用本地缓存吗？
缓存机制本身不区分是否跨域
浏览器的缓存策略主要看 HTTP 响应头里的 Cache-Control、Expires、ETag 等字段，而不是看请求是不是跨域。也就是说，只要服务器返回的响应允许缓存，并且缓存未过期，即使是跨域请求，也能走本地缓存。
举个例子，你的网站 https://site-a.com 从 https://cdn.site-b.com/jquery.js 加载 jQuery，如果这个 JS 文件的响应头设置了 Cache-Control: max-age=3600，那么第一次加载后，一小时内再次访问就会直接使用本地缓存，不会重新下载。
但 CORS 头部会影响缓存可用性
虽然缓存机制本身支持跨域，但有一个关键点：如果跨域请求需要携带凭证（比如 cookies），或者使用了某些自定义头部，浏览器会先发起预检请求（preflight request），也就是 OPTIONS 请求。这类预检请求默认是不被缓存的，除非服务器明确设置了 Access-Control-Max-Age。
例如，服务器返回：
Access-Control-Allow-Origin: https://site-a.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Max-Age: 86400这表示预检请求的结果可以缓存一天内有效，期间不再重复发送 OPTIONS 请求。否则每次都要预检，反而让缓存优势大打折扣。
实际开发中的建议
如果你控制着后端服务，建议对常用的跨域接口设置合理的缓存策略。比如静态资源加上 Cache-Control，API 接口根据数据更新频率决定是否可缓存。对于频繁调用的公共接口，哪怕跨域，也可以通过缓存减少延迟。
另外，使用 CDN 托管公共资源时，本身就是典型的跨域场景，而这些资源能快速加载，正是依赖了浏览器缓存。像 Google Fonts、React 官方 CDN 都充分利用了这一点。
所以，跨域请求完全可以走本地缓存，前提是你得让服务器“告诉”浏览器：这个资源可以缓存，而且多久之内不用重新请求。