解决静态资源跨域

站长建站的时，习惯使用S3协议存储用自定义域名，或者是自建了一个静态资源站，那么跨域问题基本上就会出现，本文就将探讨针对不同的静态资源存储提供对应解决方案。

1、为什么会跨域

根本在于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，也可以说Web应用都是基于同源策略的。浏览器只是其中的一种实现，我们解决跨域问题实际上就是解决两个域的内容交互问题。在浏览器中，如果没有做到同源，同源策略会阻止一个域的js脚本和另外一个域的内容进行交互，即我们经常遇到的CORS问题。

2、何为同源，何为跨域

同源（即指在同一个域）就是两个交互页面具有相同的协议（protocol），主机（host）和端口号（port），三者只要有一个就破坏了同源策略，也就是说当你请求的 url 只要三者有一个和你当前页面不一致就构成了跨域。下面是一些例子。

3、跨域解决

首先本文只讨论静态资源（普通跨域）请求，携带Cookie的跨域请求是需要前后端都进行设置，不做细究。

下面根据两个常用来源给予解决方案

1）S3存储

这是很多建站必带的附件存储方案，建站工具本身携带也好，又或者是通过插件形式实现也好。他确实是维护成本相对较低，方便。

如果pd.tenyon.cn是我存储桶的自定义域名，我的站点向他下面/2024/index发送请求时，如果你是没有配置过S3安全跨域策略的话，必定跨域。因为他破坏同源策略，就会造成CORS，所以需要你在对应S3存储策略中配置的。

以腾讯云COS为例

需要配置CORS

如果有缓存设置，一定不要缓存，不然要等到缓存刷新才生效

2）自定义资源站

也有很多站长喜欢将一些静态资源直接放到服务器中，比如头像，自定义字体切片，随机图等。

如果pd.tenyon.cn是静态资源的访问域名，我的站点由blog.cuuxx.com向他下面/2024/index发送请求时，也会造成跨域，需要在ngnix中配置

server {
    xxxxxxxxxx
    add_header Access-Control-Allow-Origin 'https://blog.cuuxx.com';
    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';
}

如果你的静态资源或者是反代资源被请求的地方有点多这里 Access-Control-Allow-Origin 后面可以是 '*'，否则就单地址就行
Access-Control-Allow-Methods和Access-Control-Allow-Headers可以不加

转载：https://blog.cuuxx.com/archives/1719975674721

推荐订阅源