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

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

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

解决方法

在Nginx的conf目录下修改nginx.conf或者vhost下对应的domain conf，添加以下代码：


代码如下:

location ~* \.(eot|ttf|woff)$ {
add_header Access-Control-Allow-Origin *;
}

更详细的Nginx的跨域配置，请查看下面的文章。

Wide-open CORS config for nginx

赞 (0)

相关推荐

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

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

  • 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 反向代理来避免 ajax 跨域请求的方法

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

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

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

  • 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解决转发地址时跨域的问题

    一.什么是跨域问题 在一个服务器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. 这就是跨域问题.解决方案有不少,比较好的

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

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

  • Vue中跨域及打包部署到nginx跨域设置方法

    众所周知,我们在做前后端分离项目的时候,经常需要在本地起前端工程,接口希望拉取服务端的实际数据而不是本地的mock数据,而如果本地程序直接访问远程接口, 肯定会遇到跨域问题. 什么是跨域?实现跨域的多种方式? 这里我就不详细介绍了,大家自行百度哈 为什么要实现前端跨域 一般来讲,前后端分离的项目在大公司都会由后台设置允许跨域访问,因为后台设置允许跨域是很简单和方便的,但是某些情况下,一些小公司或者你工作的场所后台不怎么配合的情况下,这就需要前端来配置跨域请求来方便我们使用接口 vue项目中的配置

  • Nginx跨域问题解析与解决

    Nginx跨域问题解析与解决

    目录 什么是跨域 跨域场景 解决跨域的四种方式 什么是跨域 域: 是指浏览器不能执行其他网站的脚本 跨域: 它是由浏览器的 同源策略 造成的,是浏览器对 JavaScript 实施的安全限制,所谓同源(即指在同一个域)就是两个页面具有相同的协议 protocol,主机 host 和端口号 port 则就会造成 跨域 跨域场景 场景的跨域场景有哪些,请参考下表 当前url 请求url 是否跨域 原因 http://www.autofelix.cn http://www.autofelix.cn/a

  • 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

  • jsonp跨域获取百度联想词的方法分析

    本文实例讲述了jsonp跨域获取百度联想词的方法.分享给大家供大家参考,具体如下: jsonp原理: 1.Web页面上用<script> 引入 js文件时则不受是否跨域的影响 (不仅如此,我们还发现凡是拥有"src"这个属性的标签都拥有跨域的能力,比如<script>.<img>.<iframe>) 2.于是我们把数据放到服务器上,并且数据为json形式(因为js可以轻松处理json数据) 3.因为我们无法监控通过<script&g

  • CKeditor4 字体颜色功能配置方法教程

    本文实例讲述了CKeditor4 字体颜色功能配置方法.分享给大家供大家参考,具体如下: 今天动手ckeditor编辑器的时候发现工具栏上并没有可以更改字体颜色和背景颜色的按钮,所以我上网搜了下,网上特别多config.js文件配置的代码了,看得眼花缭乱的我选择把全部代码都复制下来.结果当然是没用的--一开始我还能有文本框.工具栏,到后来就变成什么都没有了. 后来我找到了ckeditor的文档:https://ckeditor.com/docs/index.html,找到里面的指南 在搜索框里搜

  • 查看nginx配置文件路径和资源文件路径的方法

    查看nginx配置文件路径 通过 nginx -t nginx -t命令的原始作用是用来验证nginx配置文件格式和配置是否存在异常,通过该命令会输出nginx的配置文件的路径和验证结果,在输出结果中就可以找到当前的nginx的加载的配置文件的地址,如下所示: nginx -t nginx: the configuration file /etc/nginx/nginx.conf syntax is ok nginx: configuration file /etc/nginx/nginx.co

  • AJAX跨域请求数据的四种方法(实例讲解)

    由于浏览器的同源策略 ajax请求不可以接收到请求响应回来的数据 请求数据需要调用浏览器的内置构造函数 XMLHttpRequest() 进行 实例对象 var xhr = new XMLHttpRequest(); 注意点 在IE8之前支持的 ActiveXobject("Microsoft.XMLHTTP");  记住要进行兼容处理哦  在这里我就不写了 通过该对象进行获取 获取数据的四种状态  xhr.readyState 该属性保存着请求数据的几种状态 1.xhr.open(请

  • jquery的ajax和getJson跨域获取json数据的实现方法

    很多开发人员在使用jquery在前端和服务器端进行数据交互,所以很容易会认为在前端利用jquery就可以读取任何站点的数据了.近日在进行开 发时,因为要和第三方公司的一个项目进行数据的共享,因为考虑多不占用服务器的资源,遂决定直接在html进行数据的读取,不走服务器端进行中转了.然后 正好就遇到了浏览器端跨域访问的问题. 跨域的安全限制都是指浏览器端来说的,服务器端不存在跨域安全限制的问题. 目前浏览器端跨域访问常用的两种方法有两种: 1.通过jQuery的ajax进行跨域,这其实是采用的jso

随机推荐