HTTP 헤더

Since 2.1.0

“설정” 내에 정의된 헤더는 Webview에 대한 응답과 함께 전송됩니다. 여기에는 “IPC(프로세스 간 통신)” 메시지와 “오류 응답”은 포함되지 않습니다. 더 구체적으로 말하면,

crates/tauri/src/protocol/tauri.rs ↗

의 get_response 함수를 통해 전송되는 모든 응답에 이 헤더가 포함됩니다.

헤더 설정 방법

문자열로
문자열 배열로
객체/키-값으로 (값은 문자열이어야 합니다)
null 값으로

실제 응답에서는 헤더 값이 항상 문자열로 변환됩니다. 설정 파일의 내용에 따라 헤더 값 중 일부를 만들어야 할 수도 있습니다. 이 복합 값이 어떻게 만들어지는지에 대한 규칙은 다음과 같습니다:

string: “문자열”의 경우, 생성된 헤더 값도 동일한 내용입니다.
Array: “배열”의 경우, 생성된 헤더 값에서는 각 항목(요소)이 , 로 연결됩니다.
key-value: “키-값”에서는 각 항목이 “키 + 공백 + 값”으로 만들어진 후, 생성된 헤더 값에서는 각 항목이 ; 로 연결됩니다.
null: “null 값”의 경우, 헤더는 무시됩니다.

설정 예

{
 //...
  "app":{
    //...
    "security": {
      //...
      "headers": {
        "Cross-Origin-Opener-Policy": "same-origin",
        "Cross-Origin-Embedder-Policy": "require-corp",
        "Timing-Allow-Origin": [
          "https://developer.mozilla.org",
          "https://example.com",
        ],
        "X-Content-Type-Options": null, // gets ignored
        "Access-Control-Expose-Headers": "Tauri-Custom-Header",
        "Tauri-Custom-Header": {
          "key1": "'value1' 'value2'",
          "key2": "'value3'"
        }
      },
      // CSP가 헤더 항목 내에 정의되지 않았음에 유의하십시오.
      "csp": "default-src 'self'; connect-src ipc: http://ipc.localhost",
    }
  }
}

이 예에서는 Cross-Origin-Opener-Policy와 Cross-Origin-Embedder-Policy가 SharedArrayBuffer ↗의 사용을 허용하도록 설정되어 있습니다. Timing-Allow-Origin은 목록에 기재된 웹 사이트에서 로드된 스크립트가 Resource Timing API(리소스 타이밍) ↗를 통해 상세한 네트워크 타이밍 데이터에 액세스하는 것을 허용합니다.

“helloworld” 예제에서는 설정이 다음과 같이 됩니다:

access-control-allow-origin:  http://tauri.localhost
access-control-expose-headers: Tauri-Custom-Header
content-security-policy: default-src 'self'; connect-src ipc: http://ipc.localhost; script-src 'self' 'sha256-Wjjrs6qinmnr+tOry8x8PPwI77eGpUFR3EEGZktjJNs='
content-type: text/html
cross-origin-embedder-policy: require-corp
cross-origin-opener-policy: same-origin
tauri-custom-header: key1 'value1' 'value2'; key2 'value3'
timing-allow-origin: https://developer.mozilla.org, https://example.com

프레임워크

일부 개발 환경에서는 운영 환경을 에뮬레이트하기 위한 추가 설정이 필요합니다.

JavaScript/TypeScript

빌드 도구 “Vite”(Qwik, React, Solid, Svelte, Vue 포함)를 실행하는 설정 도구에는 필요한 헤더를 vite.config.ts에 추가합니다.

import { defineConfig } from 'vite';

export default defineConfig({
  // ...
  server: {
    // ...
    headers: {
      'Cross-Origin-Opener-Policy': 'same-origin',
      'Cross-Origin-Embedder-Policy': 'require-corp',
      'Timing-Allow-Origin':
        'https://developer.mozilla.org, https://example.com',
      'Access-Control-Expose-Headers': 'Tauri-Custom-Header',
      'Tauri-Custom-Header': "key1 'value1' 'value2'; key2 'value3'",
    },
  },
});

경우에 따라 vite.config.ts가 프레임워크 설정 파일에 통합되어 있을 수 있지만, 설정 내용은 동일합니다. 프론트엔드 프레임워크가 Angular인 경우, 필요한 헤더를 angular.json에 추가합니다.

{
  //...
  "projects": {
    //...
    "insert-project-name": {
      //...
      "architect": {
        //...
        "serve": {
          //...
          "options": {
            //...
            "headers": {
              "Cross-Origin-Opener-Policy": "same-origin",
              "Cross-Origin-Embedder-Policy": "require-corp",
              "Timing-Allow-Origin": "https://developer.mozilla.org, https://example.com",
              "Access-Control-Expose-Headers": "Tauri-Custom-Header",
              "Tauri-Custom-Header": "key1 'value1' 'value2'; key2 'value3'"
            }
          }
        }
      }
    }
  }
}

마찬가지로, Nuxt의 경우 nuxt.config.ts에 추가합니다.

export default defineNuxtConfig({
  //...
  vite: {
    //...
    server: {
      //...
      headers: {
        'Cross-Origin-Opener-Policy': 'same-origin',
        'Cross-Origin-Embedder-Policy': 'require-corp',
        'Timing-Allow-Origin':
          'https://developer.mozilla.org, https://example.com',
        'Access-Control-Expose-Headers': 'Tauri-Custom-Header',
        'Tauri-Custom-Header': "key1 'value1' 'value2'; key2 'value3'",
      },
    },
  },
});

Next.js는 Vite를 사용하지 않으므로 접근 방식이 다릅니다. 자세한 내용은 여기 ↗ (영어)를 참조하십시오. 헤더는 next.config.js에서 정의합니다.

module.exports = {
  //...
  async headers() {
    return [
      {
        source: '/*',
        headers: [
          {
            key: 'Cross-Origin-Opener-Policy',
            value: 'same-origin',
          },
          {
            key: 'Cross-Origin-Embedder-Policy',
            value: 'require-corp',
          },
          {
            key: 'Timing-Allow-Origin',
            value: 'https://developer.mozilla.org, https://example.com',
          },
          {
            key: 'Access-Control-Expose-Headers',
            value: 'Tauri-Custom-Header',
          },
          {
            key: 'Tauri-Custom-Header',
            value: "key1 'value1' 'value2'; key2 'value3'",
          },
        ],
      },
    ];
  },
};

Rust

Yew와 Leptos에서는 헤더를 Trunk.toml에 추가하십시오:

#...
[serve]
#...
headers = {
  "Cross-Origin-Opener-Policy" = "same-origin",
  "Cross-Origin-Embedder-Policy" = "require-corp",
  "Timing-Allow-Origin" = "https://developer.mozilla.org, https://example.com",
  "Access-Control-Expose-Headers" = "Tauri-Custom-Header",
  "Tauri-Custom-Header" = "key1 'value1' 'value2'; key2 'value3'"
}

Support on Open Collective Sponsor on GitHub