• nginx Access-Control-Allow-Origin css跨域


    问题原因: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/

  • 相关阅读:
    solidworks中的一些标注尺寸的技巧
    SolidWorks 2-8草图绘制的一般过程
    SolidWorks 2-7 草图的约束【课程来自虎课网】
    SolidWorks 2-5 草图的编辑
    HTML 文本格式化实例--实体
    今天长进之redis的学习
    初步了解Quartz
    职场风云3
    内网穿透
    职场风云2
  • 原文地址:https://www.cnblogs.com/wei-lai/p/6269639.html
Copyright © 2020-2023  润新知