问题背景

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

错误提示 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练习生》