Fetch ,как в заголовок header передать строку из input?

Question

[depsotr]

Есть форма , в input ввожу ключ (строка) как ее передать в header , в fetch
Headers:
“Key”: данные из input ?
Просто константа отрабатывает , если константе присвоить строку из input 404 ошибка , если в коде подставляю ключ на прямую , то все хорошо , ответ 200 , код не предоставляю , так как не вижу смысла , но если нужно скину

Comments

[Алексей Ярков]

код не предоставляю , так как не вижу смысла

Отличный план. Надёжный как швейцарские часы ))

[depsotr]

Алексей Ярков,

<template> 
 <div> 
 <h1>LeadHit</h1> 
 <form class="card auth-card" [id305091293|@submit].prevent="submitHandler"> 
 <div class="card-content"> 
 <span class="card-title"></span> 
 <div class="input-field"> 
 <input 
 id="email" 
 type="text" 
 v-model.trim="email" :class="{invalid: ($v.email.$dirty && !$v.email.required) || ($v.email.$dirty && !$v.email.minLength) || ($v.email.$dirty && !$v.email.maxLength)}" 
 > 
 <label for="email">Leadhit-Site-Id</label> 
 <small class="helper-text invalid" 
 v-if="$v.email.$dirty && !$v.email.required" 
 >id сайта должен содержать 24 символа</small> 
 <small class="helper-text invalid" 
 v-else-if="$v.email.$dirty && !$v.email.maxLength" 
 >id сайта должен содержать "НЕ БОЛЕЕ" {{$v.email.$params.maxLength.max}} символов. Сейчас он {{email.length}}</small> 
 <small class="helper-text invalid" 
 v-else-if="$v.email.$dirty && !$v.email.minLength" 
 >id сайта должен содержать "НЕ МЕНЕЕ" {{$v.email.$params.minLength.min}} символов. Сейчас он {{email.length}}</small> 
 </div> 
 </div> 
 <div class="card-action"> 
 <div> 
 <button 
 class="btn waves-effect waves-light auth-submit" 
 type="submit" 
 > 
 Войти 
 </button> 
 </div> 
 </div> 
</form> 
</div> 
</template> 
 
<script> 
import { required, minLength, maxLength } from 'vuelidate/lib/validators' 
 
export default { 
 name: 'login', 
 data: () => ({ 
 email: '' 
 }), 
 validations: { 
 email: { required, minLength: minLength(24), maxLength: maxLength(24) } 
 }, 
 methods: { 
 submitHandler () { 
 if (this.$v.$invalid) { 
 this.$v.$touch() 
 return 
 } 
 fetch('https://track-api.leadhit.io/client/test_auth', { 
 method: 'GET', 
 headers: { 
 'Api-Key': '5f8475902b0be670555f1bb3:eEZn8u05G3bzRpdL7RiHCvrYAYo', 
 'Leadhit-Site-Id': вставить код из input  
 } 
 }) 
 const formData = { 
 email: this.email 
 } 
 console.log(formData) 
 this.$router.push('/analytics') 
 } 
 } 
} 
</script>

Answer 1

[Владимир Коротенко]

Я бы почитал документацию
https://developer.mozilla.org/ru/docs/Web/API/Fetc...

// Пример отправки POST запроса:
async function postData(url = '', data = {}) {
  // Default options are marked with *
  const response = await fetch(url, {
    method: 'POST', // *GET, POST, PUT, DELETE, etc.
    mode: 'cors', // no-cors, *cors, same-origin
    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
    credentials: 'same-origin', // include, *same-origin, omit
    headers: {
      'Content-Type': 'application/json'
      // 'Content-Type': 'application/x-www-form-urlencoded',
    },
    redirect: 'follow', // manual, *follow, error
    referrerPolicy: 'no-referrer', // no-referrer, *client
    body: JSON.stringify(data) // body data type must match "Content-Type" header
  });
  return await response.json(); // parses JSON response into native JavaScript objects
}

postData('https://example.com/answer', { answer: 42 })
  .then((data) => {
    console.log(data); // JSON data parsed by `response.json()` call
  });

Забавно но написал код в песочнице. https://jsfiddle.net/vkorotenko/jcmetvp8/13/

Похоже вы просто не можете обьяснить