包含 CSS 的文件和未在服务器上提供的 JS 文件并打印 ��U��v��8��+

Question

When I run my hapijs app locally it is working but when I deploy it in the server it doesn't work. The page can serve html files but if the HTML file has css or bootsrap then it prints weird symbols like ��U�v�8��+

The link that shows the weird response: https://us-central1-fir-app-85853.cloudfunctions.net/v1/teacher/list

Here is my index.js file.

How can I fix this issue?

'use strict';
const functions = require('firebase-functions');
const api = require('./server');

exports.v1 = functions.https.onRequest(async (event, resp) => {
  let server = await api.startServer();
  const options = {
    method: event.httpMethod,
    headers: event.headers,
    url: event.path,
    payload: event.body
  };

  return server
    .inject(options)
    .then(response => {
        delete response.headers['content-encoding']
        delete response.headers['transfer-encoding']
        response.headers['x-powered-by'] = 'hapijs'
        resp.set(response.headers);
        return resp.status(response.statusCode).send(response.result);
    })
    .catch(error => resp.status(500).send(error.message || "unknown error"));
});

Here is my full source code on github https://github.com/kartikgreen/hapijs-firebase

Answer 1

I just removed the 'accept-encoding': 'gzip, deflate, br' line in the request headers' object to not request gzip compression.

This answer is already in the link

Answer 2

This is very likely a character encoding issue.

There are a few causes, one is a different character encoding being outputted than UTF-8.

so say your document outputs in ISO-8859-1 (known as Latin-1), if you do not set the character set the browser will default to UTF-8. Think of it like outputting chinese and then asking a language parser to treat it as japanese, it will never understand!

Not sure how to do it in hapjs but in PHP you would just add a header as follows:-

header("Content-Type: text/html; charset=ISO-8859-1");

The other possible cause is a Byte Order Mark (BOM) .

If your script is accidentally outputting some blank data before it should this can add these invisible characters.

There are loads of answers on BOMs on Stack Overflow so I won't repeat those.

I would normally say run the page through the W3C Internationalisation Checker but your page seems to kill it (which could be down to firebase). Perhaps you could capture the raw output to a file and run it through that way?