모든 fetch() 요청에 대한 기본 헤더 설정

모든 fetch() 요청에 대한 기본 헤더 설정

fetch API를 사용하여 요청마다 기본 헤더를 설정할 수 있습니까?
내가 하고 싶은 것은, 내가 하고 싶은 것은,Authorizationjson Web 토큰이 있을 때마다 헤더로 이동합니다.localStorage현재의 솔루션은 다음과 같은 기능으로 헤더를 설정하는 것입니다.

export default function setHeaders(headers) {
    if(localStorage.jwt) {
        return {
            ...headers,
            'Authorization': `Bearer ${localStorage.jwt}`
        }
    } else {
        return headers;
    }
}

다음으로, fetch 요구의 헤더를 설정하는 방법은 다음과 같습니다.

return fetch('/someurl', {
        method: 'post',
        body: JSON.stringify(data),
        headers: setHeaders({
            'Content-Type': 'application/json'
        })
    })

하지만 더 나은 방법이 있을 거야도움이 된다면 React/Redux/Express 앱을 개발 중입니다.

작성fetch래퍼로 문제를 해결할 수 있습니다.

function updateOptions(options) {
  const update = { ...options };
  if (localStorage.jwt) {
    update.headers = {
      ...update.headers,
      Authorization: `Bearer ${localStorage.jwt}`,
    };
  }
  return update;
}

export default function fetcher(url, options) {
  return fetch(url, updateOptions(options));
}

또한 Axios 또는 다른 패키지가 더 좋다고 판단될 경우 어플리케이션 내의 모든 콜에 대해 요청 클라이언트를 쉽게 전환할 수 있다는 이점도 있습니다.그리고 다른 것도 할 수 있어요.options.body오브젝트이며,'Content-Type: application/jsonheader를 클릭합니다.

대행 수신기를 사용하여 가져오기 대신 Axios를 사용할 수 있습니다.

const setAuthorization = (token) => {

  api.interceptors.request.use((config) => {
    config.headers.Authorization = 'Bearer ' + token;
    return config;
  });

}

여기서 Api는 기본 URL을 가진 Axios 개체입니다.

const api= axios.create({
  baseURL: 'http://exemple.com'
});

토큰을 받으면 함수 세트를 호출하면 됩니다.허가.

출처 : Axios README.md

Andri Möll이 FetchDefaults.js 믹스인을 작성했습니다.fetch이 명령어는 가져오기 기본값을 설정합니다.

var Url = require("url")
var assign = require("oolong").assign
var merge = require("oolong").merge
var PARSE_QUERY = false
var PROTOCOL_RELATIVE = true // Enable //example.com/models to mimic browsers.

exports = module.exports = function(fetch, rootUrl, defaults) {
  if (typeof rootUrl === "string") rootUrl = parseUrl(rootUrl)
  else defaults = rootUrl, rootUrl = null
  return assign(exports.fetch.bind(null, fetch, rootUrl, defaults), fetch)
}

exports.fetch = function(fetch, rootUrl, defaults, url, opts) {
  if (rootUrl != null) url = rootUrl.resolve(url)
  if (typeof defaults === "function") defaults = defaults(url, opts)
  return fetch(url, opts == null ? defaults : merge({}, defaults, opts))
}

function parseUrl(url) {
  return Url.parse(url, PARSE_QUERY, PROTOCOL_RELATIVE)
}

AGPL-3.0 전용 라이선스로 배포

빠르고 권장되지 않는 해킹은 기본값을 재정의하는 것입니다..fetch()기능:

const oldFetch = window.fetch;
window.fetch = function() {
    arguments[1].headers = { 'blahblah' : 'blabla' };
    return oldFetch.apply(window, arguments);
}

코드는 테스트도 안 되고 미완성입니다.이 답변을 사용하기로 결정했을 경우,arguments.length코드를 추가하여 기존 머리글을 보존하는 등나는 단지 더 많은 탐사를 위한 방향을 제시해주고 있을 뿐이다.

기본 가져오기 api를 재정의할 수 있습니다.

var originalFetch = window.fetch;
window.fetch = function (input, init) {
    if (!init) {
        init = {};
    }
    if (!init.headers) {
        init.headers = new Headers();
    }

    // init.headers could be: 
    //   `A Headers object, an object literal, 
    //    or an array of two-item arrays to set request’s headers.`
    if (init.headers instanceof Headers) {
        init.headers.append('MyHeader', 'Value');
    } else if (init.headers instanceof Array) {
        init.headers.push(['MyHeader', 'Value']);
    } else {
        // object ?
        init.headers['MyHeader'] = 'Value';
    }
    return originalFetch(input, init);
};

참고 자료:

• https://fetch.spec.whatwg.org/ #filename-filename
• https://fetch.spec.whatwg.org/ #requestinit

언급URL : https://stackoverflow.com/questions/44820568/set-default-header-for-every-fetch-request