Question

尝试通过https连接在节点（koa）服务器上请求静态css样式表失败。在http。

上正常工作

HTTP工作正常：

- http://www.example.com/assets/css/style.913142291ae94ed177988e5dfc67c66e.css提供文件，工作正常，样式表加载到应用程序。 mime-type是＆text; css＆＃39;

HTTPS失败

- https://www.example.com/assets/css/style.913142291ae94ed177988e5dfc67c66e.css下载文件，css无法正常投放。 mime-type是＆＃39; application / octet-stream＆＃39;

问题仅发生在Safari浏览器，旧版Chrome浏览器上。但最新的Chrome浏览器不会发生这种情况。

这是怎么回事？

以下是在https协议上显示响应404的Context对象的日志：

koa: ctx at staticMiddlewareHandler { request: 
   { method: 'GET',
     url: '/assets/css/style.913142291ae94ed177988e5dfc67c66e.css',
     header: 
      { connection: 'upgrade',
        host: 'www.mydomain.com',
        'x-real-ip': '172.XX.XX.XXX',
        'x-forwarded-for': '116.XX.X.XXX, 172.XX.XX.XXX',
        'x-nginx-proxy': 'true',
        accept: 'text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8',
        'accept-encoding': 'gzip, deflate',
        'accept-language': 'en-us',
        dnt: '1',
        'upgrade-insecure-requests': '1',
        'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Safari/604.1.38',
        'x-forwarded-port': '443',
        'x-forwarded-proto': 'https' } },
  response: 
   { status: 404,
     message: 'Not Found',
     header: 
      { 'x-dns-prefetch-control': 'off',
        'x-frame-options': 'SAMEORIGIN',
        'x-download-options': 'noopen',
        'x-xss-protection': '1; mode=block' } },
  app: { subdomainOffset: 2, proxy: false, env: 'development' },
  originalUrl: '/assets/css/style.913142291ae94ed177988e5dfc67c66e.css',
  req: '<original node req>',
  res: '<original node res>',
  socket: '<original node socket>' }

更新

通过ReactQL样板节点js应用程序代码。完整代码：https://github.com/reactql/kit/blob/master/kit/entry/server.js#L131

// Static file middleware
export function staticMiddleware() {
  return async function staticMiddlewareHandler(ctx, next) {
    try {
      if (ctx.path !== '/') {
        return await koaSend(
          ctx,
          ctx.path,
          process.env.NODE_ENV === 'production' ? {
            root: PATHS.public,
            immutable: true,
          } : {
            root: PATHS.distDev,
          },
        );
      }
    } catch (e) { /* Errors will fall through */ }
    return next();
  };
}

Nginx配置

server {
    listen 80;
    server_name domain.com;
    return 301 $scheme://www.$host$request_uri;
}

server {
    listen 80;
    server_name www.domain.com;
    client_max_body_size 20M;
    charset utf-8;

    # ELB stores the protocol used between the client
    # and the load balancer in the X-Forwarded-Proto request header.
    # Check for 'https' and redirect if not
    if ($http_x_forwarded_proto != 'https') {
        return 301 https://$host$request_uri;
    }

    location / {
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-NginX-Proxy true;

        # Bound to Docker my `react` container, exposed on port 4000.
        # Set name from docker-compose.yml `volumes_from`
        proxy_pass http://react:4000;
    }
}

更新2 我有一个位于nginx代理顶部的AWS负载均衡器，将所有443流量重定向到80.

节点（Koa）不在HTTPS连接上提供静态文件

0 个答案: