Nginx实现跨域使用字体文件的配置详解

本文主要给大家介绍了关于Nginx跨域使用字体文件的相关内容，分享出来供大家参考学习，下面来一起看看详细的介绍：

问题描述

今天在使用子域名访问根域名的CSS时，发现字体无法显示，在确保CSS和Font字体的路径加载无问题后，基本确定是因为跨域的问题。

通过Nginx模块Http_Headers_Module来添加Access-Control-Allow-Origin允许的地址

console报错信息

ccess to Font at 'http://w001.static.akhack.com/css/KohinoorBangla-Regular.ttf' from origin 'http://carey.akhack.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://carey.akhack.com' is therefore not allowed access.

解决方法

location ~* \.(eot|ttf|woff|svg|otf)$ {
  add_header Access-Control-Allow-Origin http://carey.akhack.com;
  add_header Access-Control-Allow-Headers X-Requested-With;
  add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
}

注意

add_header Access-Control-Allow-Origin http://carey.akhack.com;
//只允许单域名或者 ‘*' 。不推荐 ‘*' ，会导致安全问题

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • Nginx解决转发地址时跨域的问题

    一.什么是跨域问题 在一个服务器A里放置了json文件,另一个服务器B想向A发送ajax请求,获取此文件,会发生错误. Chrome提示: XMLHttpRequest cannot load ******. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. 这就是跨域问题.解决方案有不少,比较好的

  • 前端常见跨域解决方案（全）

    什么是跨域? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的. 广义的跨域: 1.) 资源跳转: A链接.重定向.表单提交 2.) 资源嵌入: <link>.<script>.<img>.<frame>等dom标签,还有样式中background:url().@font-face()等文件外链 3.) 脚本请求: js发起的ajax请求.dom和js对象的跨域操作等 其实我们通常所说的跨域是狭义的,是由浏览器同源策略限制的一类请求场

  • nginx服务器配置解决ajax的跨域问题

    在采用jquery ajax调用http请求时,发现了一系列问题: 如采用firebug调试API请求(这个API是自己服务器的应用),看到服务器明明返回200状态,response返回数据也是json格式,但ajax返回的error. 在排除json数据格式不正确的原因之后,发现了ajax error函数返回"networkerror failed to execute 'send' on 'xmlhttprequest' failed to load 'http //" XMLHt

  • 使用Nginx 反向代理来避免 ajax 跨域请求的方法

    服务器上 nginx + tomcat ,其中 nginx 监听 80 端口, tomcat 监听 8080 端口. 因为对前端不熟悉,以为用 ajax 就可以不需要 callback ,然而前端的同学说不跨域的情况下才不需要 callback ,让我在返回的 json 里加上.可是我刚刚学会了最基本的 spring-mvc 用法,根本不知道怎么加上 callback 网上到时找到一些可行的代码,差不多这个样子: @RequestMapping(method=RequestMethod.GET,

  • Nginx跨域使用字体文件的配置方法

    今天在使用子域名访问根域名的CSS时,发现字体无法显示,在确保CSS和Font字体的路径加载无问题后,基本确定是因为跨域的问题. 通过Nginx模块HttpHeadersModule来添加Access-Control-Allow-Origin允许的地址. 解决方法 在Nginx的conf目录下修改nginx.conf或者vhost下对应的domain conf,添加以下代码: 复制代码 代码如下: location ~* \.(eot|ttf|woff)$ {add_header Access-

  • Nginx服务器中处理AJAX跨域请求的配置方法讲解

    Nginx服务器中处理AJAX跨域请求的配置方法讲解

    Nginx 实现AJAX跨域请求 AJAX从一个域请求另一个域会有跨域的问题.那么如何在nginx上实现ajax跨域请求呢?要在nginx上启用跨域请求,需要添加add_header Access-Control*指令.如下所示: location /{ add_header 'Access-Control-Allow-Origin' 'http://other.subdomain.com'; add_header 'Access-Control-Allow-Credentials' 'true

  • Nginx实现跨域使用字体文件的配置详解

    本文主要给大家介绍了关于Nginx跨域使用字体文件的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 问题描述 今天在使用子域名访问根域名的CSS时,发现字体无法显示,在确保CSS和Font字体的路径加载无问题后,基本确定是因为跨域的问题. 通过Nginx模块Http_Headers_Module来添加Access-Control-Allow-Origin允许的地址 console报错信息 ccess to Font at 'http://w001.static.akhack.com

  • Javascript实现跨域后台设置拦截的方法详解

    本文主要给大家介绍了关于Javascript跨域后台设置拦截的相关内容,分享出来供大家参考学习,话不多说了,来一起看看详细的介绍吧. 子域名之间互相访问需要跨域 结论放在开头: 1.服务端必须设置允许跨域 2.客户端带cookie需要设置 withCredentials 3.无论服务端是否允许跨域,该request都会完整执行 4. options 预请求需要设置返回空,不然requestMapping没有支持该方法则出错 环境搭建 需求 首先需要搭建两个环境.一个是提供API的server A

  • 如何在React项目中引入字体文件并使用详解

    如何在React项目中引入字体文件并使用详解

    目录 前言 下面讲下如何引入字体文件并使用 一.下载字体包 二.将字体文件放到项目里 三.使用新字体 总结 前言 在做React项目的时候,发现UI设计给出的设计稿里,某些文字所用的字体,系统默认不支持.比如设计需要的这个字体:EmerlandRegular,即使在css里将文字字体设置为他们,实际效果也显示不出来. <Typography style={{ fontSize:'22px', fontFamily:'EmerlandRegular', textAlign:'center', co

  • Nginx环境下WordPress的多站点功能配置详解

    Nginx环境下WordPress的多站点功能配置详解

    WordPress的多站点功能允许安装一个WordPress程序的情况下,实现多个站点(也就是一套程序,可以绑定多个域名或子域名). 每个站点拥有独立的主题.插件.文章以及页面. 这样可以极大的减少了维护和更新多个WordPress安装程序的麻烦, 并且,每个站点之间又能够相互独立,互不影响. WordPress multisite有两个方式:子目录和子域名,这里我们主要介绍子域名方式. 也就是说,在主域名的基础上,我们会创建一个子域名,例如:http://shop.jb51.com. 同时,我

  • mpvue 单文件页面配置详解

    前言 mpvue 的出现把 vue 的开发体验带到了小程序这个平台中,但其目录结构与传统的 vue 项目却并不完全一致,一个典型的页面包含以下三个文件: index.vue // 页面文件 main.js // 打包入口,完成 vue 的实例化 main.json // 小程序特有的页面配置,早期写在 main.js 文件中 其中,每个页面的 main.js 文件基本都是一致的,可通过mpvue-entry来自动生成(weex 也有类似的处理),而 main.json 我个人认为直接在 vue

  • nginx解决跨域问题的实例方法

    前后端分离,使用nginx解决跨域问题 前端:vue.js+nodejs+webpack 后台:SpringBoot 反向代理服务器:nginx 思想:将前端代码打包,让nginx指向静态资源,nginx对后台请求进行转发. 1.将前端代码打包: npm run build 会生成一个dist文件夹.包含一个index.html文件和一个static文件夹,路径以我本地为例: /Users/xxx/ideaProjects/webtest/dist 2.打开 /usr/local/etc/ngi

  • nginx 解决跨域问题嵌入第三方页面

    nginx 解决跨域问题嵌入第三方页面

    目录 前言 困难 跨域定义 nginx 的特性 反向代理 动静分离 尝试实现 最终效果 题外话 前言 我们自己的系统需要加载第三方系统中的一部分组件.计划的是第三方开发.提供相关接口,我们通过接口获取到数据,然后,再用这些数据在我们系统中吧相关的功能实现了 可惜的是,领导没有协调下来.正规的途径搞不定,那就需要花式整活了 前面也说了,我们走接口拉数据重新渲染,这样的玩法是比较常规的,缺点是需要重新去实现相关模块,还需要对方开放接口. 现在只能走非正常渠道,比如,容易想到的,就是 我们直接把页面嵌

  • form+iframe解决跨域上传文件的方法

    (1)  jsp代码: <form id="form" name="form" enctype="multipart/form-data" method="post" target="hidden_frame"> <table style="border:0;width:100%;text-align:middle;"> <tr style="bo

  • 如何使用Nginx解决跨域问题详解

    目录 先来说一下什么是同源策略 什么是跨域? 跨域分类 Nginx解决跨域问题 解释 1.Access-Control-Allow-Origin 2.Access-Control-Allow-Headers 是为了防止出现以下错误: 3.Access-Control-Allow-Methods 是为了防止出现以下错误: 4.给OPTIONS 添加 204的返回,是为了处理在发送POST请求时Nginx依然拒绝访问的错误 预检请求(preflight request) 尾声 先来说一下什么是同源策

随机推荐