问题原因:nginx 服务器 css 字体跨域 以及img相对路径 问题

描述:用nginx做页面静态化时遇到了两个问题

1.我有两个静态资源服务器 static.xxx.com  和 item.xxx.com 。我的字体文件存在 static.xxx.com上,在用item.xxx.com 访问 static.xxx.com 的时候浏览器报以下错误

Font from origin 'http://static.xxx.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Origin 'http://item.xxx.com' is therefore not allowed access.

问题的本质就是 css跨域请求。

Nginx 解决办法:

add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers X-Requested-With;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS;

将这段代码添加到 http{} 或者静态资源对应的 server{} 中,

如果只为自己的网站使用可以将第一行代码的星号改为自己的域名,例如 *.xxx.org

2.图片的相对路径  <img src="/pictrue/1.jpg"/>

img 的相对路径是从 网站的根目录下开始查找,为了简单我把图片放到静态页面的跟目录下

参考链接:https://blog.fbzl.org/access-control-allow-origin-%E8%A7%A3%E5%86%B3%E8%B7%A8%E5%9F%9F%E6%9D%83%E9%99%90%E9%97%AE%E9%A2%98/

nginx Access-Control-Allow-Origin css跨域的更多相关文章

  1. 使用nginx反向代理处理前后端跨域访问

    本文主要解决:使用nginx反向代理处理前后端跨域访问的问题 1.何为跨域访问? 以下类型为跨域访问 1)不同域名间访问 www.zuiyoujie.com和www.baidu.com 2)同域名不同 ...

  2. Access control allow origin 简单请求和复杂请求

    原文地址:http://blog.csdn.net/wangjun5159/article/details/49096445 错误信息: XMLHttpRequest cannot load http ...

  3. 配置nginx反向代理服务器,解决浏览器跨域调用接口的限制问题

    配置nginx反向代理服务器,解决浏览器跨域调用接口的限制问题 - 大venn的博客 - CSDN博客https://blog.csdn.net/u011135260/article/details/ ...

  4. nginx代理天地图做缓存解决跨域问题

    作为一个GISer开发者,天地图是经常在项目中以底图的形式出现,其加载地址如: 天地图矢量:http://t{0-6}.tianditu.com/DataServer?T=vec_w&x={x ...

  5. nginx.config 多个方案解决跨域问题

    #user nobody; user sam owner; worker_processes 1; #error_log logs/error.log; #error_log logs/error.l ...

  6. Nginx:多项目开发配置跨域代理

    简述Nginx应用场景(前后端) 当我们开发 vue 项目中可以通过 proxyTable 进行跨域,但如果是原生的 html+css+js ,或者其他没有跨域插件的项目中,想要跨域就要引入配置许多的 ...

  7. 搭建nginx代理,为前端页面跨域调用接口

    前端同学因开发需要,本地搭建的服务需要调用其它域名的接口,在帮助正确配置后,已能正常使用. 这里写一篇博客,记录一下. 前端页面地址为127.0.0.1:9813/a.html 接口地址http:// ...

  8. 20191204-使用nginx解决ajax测试调用接口跨域问题

    问题描述 之前要测试一个http的接口,在postman中测试成功,但使用ajax调用却跨域.于是通过使用ngin反向代理的方式来解决ajax调用跨域问题 测试页面的内容 <html> & ...

  9. 利用nginx做反向代理解决前端跨域问题

    最近朋友再群里提了一个问题,他们公司给他提供了一个获取数据的接口,在浏览器访问这个接口能获取到json数据,但是放在项目里使用ajax就产生了跨域问题,一般这个需要提供接口的后台方面需要做跨域处理,但 ...

随机推荐

  1. Centos 7最小化InfluxDB部署

    配置源 [influxdb] name = InfluxDB Repository - RHEL \$releasever baseurl = https://repos.influxdata.com ...

  2. Java基础之IO流学习总结

    Java流操作有关的类或接口: Java流类图结构: 流的概念和作用 流是一组有顺序的,有起点和终点的字节集合,是对数据传输的总称或抽象.即数据在两设备间的传输称为流,流的本质是数据传输,根据数据传输 ...

  3. python脚本难点

    本文主要记录在录制过程中,遇到一些需要特殊处理的脚本.如果有总结不好的地方,希望多多指点. 一.输入框listview选择: 如图:   类似这种情况,选择其中一项的脚本如下: m = driver. ...

  4. C#设计模式(3)——抽象工厂模式

    1.抽象工厂模式介绍 上一篇我们了解了工厂模式,知道工厂模式可以解决简单工厂的缺陷(简单工厂添加新产品时要修改工厂类,不符合开闭原则),但是简单工厂和工厂模式都是只生产一种产品(前边的简单工厂和工厂都 ...

  5. `&nbsp;` `&emsp;` `&ensp;` `&thinsp;`

    字符实体 说明   这是我们使用最多的空格,也就是按下space键产生的空格.在HTML中,如果你用空格键产生此空格,空格是不会累加的(只算1个).要使用html实体表示才可累加.   占据的宽度正好 ...

  6. JVM简析

    JVM结构图 1.程序计数器 是最小的一块内存区域,它的作用是当前线程所执行的字节码的行号指示器,在虚拟机的模型里,字节码解释器工作时就是通过改变这个计数器的值来选取下一条需要执行的字节码指令,分支. ...

  7. 分布式配置 SSH 免密登陆

    原地址忘记了,暂且记下 一.准备工作 1) 用客户端工具(ssh client或者putty)连接到linux服务器.在root用户下输入命令 vi /etc/hosts,用vi编辑hosts文件,如 ...

  8. idea搭建Spring Boot+MyBatis

    需要准备的环境: idea 2017.2 jdk1.8.0_144 Maven 3.5.0 请提前将idea与Maven.jdk配置好,本次项目用的都是比较新的. 步骤: 一.首先使用idea新建一个 ...

  9. Log4j 1.x JDBCAppender记录日志失效问题详解

    官网:http://logging.apache.org/log4j/1.2/manual.html 事件:最近在项目中使用log4j 1.x JDBCAppender记录管理员操作日志到数据库,在测 ...

  10. Kudu系列-基础

    Apache Kudu 支持Insert/Update/Delete 等写操作(Kudu 随机写效率也很高, 实测对一个窄表做全字段update, 其速度达到了Insert速度的88%, 而verti ...