Nginx解决静态资源跨域问题

问题背景

今天遇到一个很棘手的问题，明明已经解决了服务端的跨域问题了，为什么访问数据资源还是跨域。哪里有广告？你眼睛串亲的啊

错误提示： Access to font at 'dev.aaa.com/20220809/el…' from origin 'dev.aaa.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

跨域类型

这里我们为了好区分定位我们的问题，暂且将跨域分为数据接口跨域和静态资源跨域。

随着饿哦们的项目愈来愈复杂，也由单一的服务发展为分布式的微服务架构，很多的服务分担着不同的职责。

服务端接口我们很好理解，就是我们的业务服务接口。

静态资源站点，就是我们的静态资源服务，比如：图片、视频、css、js、文件等等。我们将这些静态资源放到一个服务映射出来，这就形成了我们所说的的静态资源站点。

定位问题

刚才上文中已经说到了，我们服务端接口的跨域已经解决了，而且请求接口也就不再会出现跨域问题，所以这里查看了请求路径，访问的使我们的静态资源，也就是说，使我们的静态资源跨域了！

解决问题

既然定位到了我们的静态资源站点跨域了，那么我们怎么解决静态资源站点跨域的问题呢？

接下来，我们来看一种最方便快捷的解决静态资源跨域的方法————ngxin配给解决静态资源跨域

   server {
                listen          80;
                add_header 'Access-Control-Allow-Origin' '*';
                server_name dev.aaa.com;
                root /yuxuntoo/static/uploadfile;
                index index.html;
        }

从这段nginx配置我们可以看出来，在我们配置映射的地方加了一句

add_header 'Access-Control-Allow-Origin' '*';

通过这句代码配置，我们就解决了静态站点资源的跨域问题，是不是很简单？

好了，今天关于Nginx解决静态资源跨域问题就讲解到这！欢迎大家留言交流。

欢迎大家关注我的《coder练习生》