Блог

Главная - Вопросы по программированию - Настройка заголовков на локальном сервере разработки Angular

Настройка заголовков на локальном сервере разработки Angular

#angular #angular-cli

#angular #angular-cli

Вопрос:

Мое приложение — это приложение только на стороне клиента, которое в настоящее время запущено на localhost. Я пытаюсь использовать библиотеку Wasm, к которой требуется доступ SharedArrayBuffer . Он работает в Chrome и Edge, однако, похоже, Firefox установил ограничения, что привело к ошибке: ReferenceError: SharedArrayBuffer is not defined

В соответствии с MDN Firefox требует установки следующих заголовков:

 Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

Мое приложение работает на localhost: 4200. Я пытаюсь заставить сервер ng serve разработки установить заголовки. Я попытался сделать это с помощью следующего кода:

 // proxy.conf.js
module.exports = {
  "/": {
    logLevel: "debug",
    target: "http://localhost:4200",
    bypass: (req, res, proxyOptions) => {
      res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
      res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
    },
  },
};

Однако это не работает. Есть ли способ установить заголовки с помощью сервера Angular или другого обходного пути?

Комментарии:

1. При развертывании на сервере с https все должно работать нормально, проблема в том, что вы работаете на localhost. Вы можете обойти это во время обслуживания, используя плагин, например addons.mozilla.org/en-CA/firefox/addon/cors-everywhere

Ответ №1:

Вы можете добавить заголовки COEP и COOP на Angular Dev-server в angular.json, чтобы решить эту проблему.

Например.,

 "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "web-ui:build",
            "proxyConfig": "proxy.conf.json",
            "headers": {
              "Cross-Origin-Opener-Policy":"same-origin",
              "Cross-Origin-Embedder-Policy":"require-corp"
            }
           }
          }

Это должно привести оба заголовка «Cross-Origin-Opener-Policy» и «Cross-Origin-Embedder-Policy» к соответствующим значениям. Запуск ng служит для отражения этих изменений в ответе.

Ответ №2:

Искал решение для этого довольно долго — спасибо @Sasikumar за подсказку!

Просто хотел добавить, что раздел в default new / my angular project выглядит немного иначе:

     "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "configurations": {
        "production": {
          "browserTarget": "webapp:build:production"
        },
        "development": {
          "browserTarget": "webapp:build:development",
          "headers": {
            "X-Max-Test":"my-test-header",
            "Content-Security-Policy": "default-src 'self'; frame-ancestors 'self'; script-src 'self' 'unsafe-inline'; font-src 'self' https://fonts.gstatic.com/; style-src 'self' https://fonts.googleapis.com/ 'unsafe-inline'; img-src 'self' data:;"
          }
        }
      },
      "defaultConfiguration": "development"