问题[css](server)

我有一个从 CloudFront 端点传送到浏览器的 Javascript 应用程序。应用程序的所有静态文件都托管在 S3 存储桶中。这涉及一大堆 javascript 和 css 文件，以及一些字体文件。

加载整个应用程序的 html 是由服务器生成和交付的，我们称该服务器为“https://my.domain.com”。

如前所述，这只是 html 文件。然后从指向存储桶作为其来源的云端端点下载所有静态内容。我们将这些称为 xxxx.cloudfront.net 和存储桶 my-bucket。

据我了解，几乎所有从生成的 html 到云端端点的请求都是 CORS 请求，因为 html 的来源是 my.domain.com，并且所有请求的文件显然都没有托管在该域上。

所以很自然，我去设置所有 CORS 的东西。首先，bucket 是完全公开的，它具有以下 CORS 策略：

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "*",
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    }
]

这似乎对一切都有效……除了字体文件！我可能应该提到存储桶的文件夹结构。它有三个文件夹，生产、开发和通用。这些内容应该是不言自明的。Common 包含字体，以及一些 3rd 方 javascript 库。生产和开发包含各自环境的 js 和 css。

无论如何，除了字体文件之外，所有内容都会加载，我收到以下错误：

Access to font at 'https://xxxx.cloudfront.net/common/fonts/outline/budicon-classic.ttf?jdete2' from origin 'https://my.domain.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

让我感到非常奇怪的是，只有字体文件会有这个问题。公共文件夹中的其他文件似乎加载得很好，如果我只是将https://xxxx.cloudfront.net/common/fonts/outline/budicon-classic.ttf?jdete2粘贴到我的浏览器中，它可以工作。

唯一的区别似乎是这些文件不是从 html 加载的，而是通过 @font-face thingy 从 css 加载的。查看加载应用程序时浏览器生成的请求，我可以清楚地看到例如设置了 origin 标头，而不是用于请求 js 或 css 文件。Set-Fetch-Mode 设置为“cors”，而对于其他文件，它设置为“no-cors”。

无论如何，我试图在云端解决这个问题。首先，我在原始配置中添加了标题“Access-Control-Allow-Origin: *”。然后我为源添加了一个行为配置，以允许路径模式 *.

现在......好吧，现在我仍然有同样的问题，并且完全没有想法，虽然想知道为什么@font-face创建的请求与对javascript和css资源的请求相比形成如此不同，但是最重要的是，我到底能做些什么来加载他们血腥的字体？

我几乎所有的项目都在使用 cloudflare，我一直在尝试为我的新项目设置它，但我面临一个非常奇怪的问题。

因此，当我从服务器更新.css文件时，当我将它们加载到网站上时，更改不会生效，而且我确信这不是缓存的事情，因为我尝试了清除缓存/隐身，甚至进行了我的油炸测试。

如果这还不够奇怪，那么这个不更新问题只会发生在.css文件上。其他格式工作得很好。

这就是为什么它让我认为它可能来自 cloudflare：查看这个带有 http 和 https 的链接：http: //fleats.club/style/aa.css。它为每个人显示不同的东西，http一个是我删除的文件，但它仍然在http上加载！而https文件是一个新的文件，名称相同，我在其中创建了一个不同的字符，我更改了其中的字符，但它仍然显示旧字符（旧字符：“saaa”）

nginx：

  listen 80;

  server_name fleats.club;

  root /srv/main/site;

  location / {
      index index.html;
  }
}

这听起来像是人为的错误，但我一直在寻找每个地方，但无法弄清楚。知道什么可能导致这种情况吗？我真的不知道

大家好，如果我犯了一个基本的错误，我很抱歉，但我真的迷路了。

我已经设置了我的 Ubuntu 16.04 服务器是 Nginx（不在 docker 容器中，在主机上运行）和 wordpress（在 docker 容器中）。

Docker Hub Wordpress repo：（我不能发布超过两个链接，但它是官方的 Wordpress repo）

经过一些配置，我设法让 nginx 和 wordpress 容器运行起来。当我通过原始 IP 地址和端口访问 wordpress 网站时，它工作正常。但是，当我从 nginx 到容器执行 proxy_pass 时，我的 wordpress 网站似乎丢失了所有的 css。具有讽刺意味的是，页面仍然有点加载。

这是一个示例：（图像的超链接）

http://[IP 地址]:51080/wp-admin/install.php

http://example.com/wp-admin/install.php

网站可用

upstream example.com {
    server localhost:51080;
}

server {
    listen  80;
    server_name example.com;

    location / {
        proxy_pass http://localhost:51080;
    }
}

码头工人运行命令

docker run --name example.com -d -v /docker/example.com:/var/www/html wordpress

/etc/hosts（我在文件中添加了以下行）

[IP address] example.com

感谢您的任何帮助！

编辑：

• /var/log/nginx/error.log - 是空的（是的，我已经检查过了，它正在记录到这个文件）
• /var/log/nginx/access.log

日志条目：

<IP Address> - - [11/Mar/2017:11:33:35 -0500] "GET /wp-admin/install.php HTTP/1.1" 200 11144 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/602.4.8 (KHTML, like Gecko) Version/10.0.3 Safari/602.4.8"

我没有使用任何框架或任何东西。我试图将我的 style.css 放在与 index.html 相同的目录中（加载正常），但是当我尝试访问它时会引发 500 错误。所以https://example.com/index.html加载正常（没有样式），但访问https://example.com/style.css会引发 500 内部服务器错误。奇怪的是，如果我将样式表放入子目录中，它会起作用，因此https://example.com/styles/style.css可以正常加载。

这是我的站点配置（虚拟主机）：

server {
    listen 80;
    server_name example.com www.example.com;

    location / {
        return 301 https://$host$request_uri;
    }

    location /.well-known {
        alias /usr/share/nginx/html/.well-known;
        allow 0.0.0.0;
        deny all;
    }
}

server {
    listen 443;
    server_name example.com www.example.com;

    root /home/deployer/example.com;

    ssl on;
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
    include includes/ssl;

    try_files $uri/index.html $uri;

    error_page 500 502 503 504 /500.html;
    client_max_body_size 4G;
    keepalive_timeout 10;
}

错误日志

2017/01/13 06:25:46 [error] 1279#0: *182 rewrite or internal redirection cycle while internally redirecting to "/style.css", client: 0.0.0.0, server: example.com, request: "GET /style.css HTTP/1.1", host: "example.com"
2017/01/13 06:25:47 [error] 1279#0: *183 rewrite or internal redirection cycle while internally redirecting to "/favicon.ico", client: 0.0.0.0, server: example.com, request: "GET /favicon.ico HTTP/1.1", host: "example.com", referrer: "https://example.com/style.css"

访问日志

0.0.0.0 - - [13/Jan/2017:06:25:46 -0500] "GET /style.css HTTP/1.1" 500 603 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.95 Safari/537.36"
0.0.0.0 - - [13/Jan/2017:06:25:47 -0500] "GET /favicon.ico HTTP/1.1" 500 603 "https://example.com/style.css" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.95 Safari/537.36"

我们在获取 MediaWiki 中的前景或基础皮肤以呈现我们页面内容部分中的任何选项卡时遇到问题。该站点是一个演示，托管在 GoDaddy 上，但我们也尝试在本地干净安装 Fedora 和 Linode。

所有适用的 CSS 和 JS 似乎都正确加载，并且日志中没有明显的错误。皮肤/主题确实正确地呈现了页面顶部的导航栏部分。也许我们在语法上做错了什么，或者还有另一个步骤来启用我们缺少的皮肤/主题？

任何帮助，将不胜感激。

https://protocol96.com/mw/Main_Page

我在 apache 上开发，现在我需要在 ngix 上部署，我遇到了一些困难。因为在我的项目中禁用了内联样式（使用 cakephp）并且在数据库中定义了一些颜色，所以我让 RsrcController 生成带有颜色的 css 到模板中。

仅当我不使用文件扩展名 .css 时调用此函数才有效，而仅使用带有控制器和函数的斜线 Url。

如果我附加以 .css 结尾的文件，则 nginx 将在 webroot 文件夹中搜索并返回 404。

这是配置的相关部分：

        location / {
            try_files $uri $uri/ /index.php?$args;
        }


        #pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        location ~ \.php$ {
           try_files $uri =404;
           include /etc/nginx/fastcgi_params;
           fastcgi_pass    127.0.0.1:9000;
           fastcgi_index   index.php;
           fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        }

我试图找到一个添加另一个位置规则的解决方案，如下所示：

location ~ rsrc/css_vars/~.css {
    ... [->second part of my question]
}

我不想将所有 .css 文件传递​​给 php。只是那些我希望是动态生成的。无论如何，我的更改似乎不起作用。

第二部分：

Cakephp 的工作方式如下：http : //url.com/controller/function/var1/var2/varx 我的控制器是 rsrc。我的函数是 css_vars。比有一些变量（用户......），最后我需要“.css”。

我想将 URl 重写为相同但没有文件扩展名“.css”。有没有办法解决正则表达式？

假设我有一个网站/var/www/Electrician 并且我有一个网站/var/www/Restaurant

如果这些网站使用单独的主机文件，我可以使用相同的 CSS 来减少空间吗？

如果我没记错的话，我肯定无法做到 ../../css/style.css 因为一台主机被限制访问另一台主机，我想。

我可以看到将一个网站放入另一个网站目录，但我看到这为跨站点问题留出了空间。

我承认我在解释这一点时做得很差。本质上，我想在同一服务器上的不同网站之间共享 CSS 样式表，这将使用单独的主机文件。

连接器设置：

<Connector ...
compression="2048"
noCompressionUserAgents="gozilla, traviata"
compressionMimeType="text/html,text/xml,text/plain,text/css,text/javascript"/>

这似乎适用于 html，但不适用于 css 或 javascript。compression="force"确实有效，但 compression="on" 无效。compression="2" 也不起作用，所以我不知道“力”到底在做什么。

有问题的文件大约 6k，我已经清除了浏览器缓存等。