Почему я сталкиваюсь только с ошибкой CORS при выполнении запроса GET onChange? - PullRequest
Новая
       12

Почему я сталкиваюсь только с ошибкой CORS при выполнении запроса GET onChange?

0 голосов
/ 09 июня 2019

Я использую клиент Create-React-App с параметром proxy: "localhost:5000, установленным в package.json, чтобы можно было легко запрашивать API на нашем сервере Node.js.

Я пытаюсь использовать API автозаполнения HERE, используя следующую функцию.

Функция автозаполнения: 

import axios from 'axios';
import hereKeys from '../config/hereConfig';

export const autoCompleteFullAddress = async query => {
  let address = null;
  try {
    await axios
      .get('https://autocomplete.geocoder.api.here.com/6.2/suggest.json', {
        params: {
          app_id: hereKeys.appId,
          app_code: hereKeys.appCode,
          query: query,
          maxresults: 1,
        },
      })
      .then(response => {
        address = response.data.suggestions[0].address;
      });
  } finally {
    return address;
  }
};

У меня есть вспомогательная функция вкомпонент выполняется для выполнения этого на основе ввода пользователя в поле ввода.

Входной компонент: 

 const [puAddress, setPuAddress] = useState('');
 const [puQuery, setPuQuery] = useState('');

  const onAddressInput = e => {
    const query = e.target.value;

// This Fails
    autoCompleteFullAddress(query).then(suggestion => {
      setPuQuery(query);
      console.log(suggestion);
    });
  };

// This works
  autoCompleteFullAddress('37044 Even Lane').then(suggestion => {
    console.log(suggestion);
  });

return (
  <TextField
     value={puQuery}
     onChange={e => onAddressInput(e)}
  />
);

Когда autoCompleteFullAddress работает самостоятельно, console.log - правильный выход.Но как только я пытаюсь выполнить это при изменении компонента, происходит сбой и выдается ошибка.

Выдается ошибка: 

Access to XMLHttpRequest at 'https://autocomplete.geocoder.api.here.com/6.2/suggest.json?
app_id=REDACTED&app_code=REDACTED&query=Elm+St&maxresults=1' 
from origin 'http://localhost:3000' has been blocked by CORS policy: 
Response to preflight request doesn't pass access control check: 
It does not have HTTP ok status.

И: 

OPTIONS https://autocomplete.geocoder.api.here.com/6.2/suggest.json?
app_id=REDACTED&app_code=REDACTED&query=Elm+St&maxresults=1 405

Заголовки невыполненных запросов: 

Access-Control-Request-Headers: authorization
Access-Control-Request-Method: GET
Origin: http://localhost:3000
Referer: http://localhost:3000/pricing-tool
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36

Заголовки успешных запросов: 

Accept: application/json, text/plain, */*
Origin: http://localhost:3000
Referer: http://localhost:3000/pricing-tool
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36

1 Ответ

0 голосов
/ 09 июня 2019

Для людей в будущем, которые могут устанавливать токен доступа таким образом, чтобы отправлять запросы к вашему API.Проблема в том, что он пытается отправить заголовок Auth с токеном на все запросы Axios.

import axios from 'axios';

const setAuthToken = token => {
  if (token) {
    const bearerToken = 'Bearer ' + token;
    // Apply to every request
    axios.defaults.headers.common['Authorization'] = bearerToken;
  } else {
    // Delete auth header
    delete axios.defaults.headers.common['Authorization'];
  }
};

export default setAuthToken;

Можно исправить, изменив логику или просто используя fetch для внешних API.

Я исправил удаление заголовка для этого конкретного запроса.

import axios from 'axios';
import hereKeys from '../config/hereConfig';

export const autoCompleteFullAddress = async query => {
  let address = null;
  delete axios.defaults.headers.common['Authorization'];
  try {
    await axios
      .get('https://autocomplete.geocoder.api.here.com/6.2/suggest.json', {
        crossdomain: true,
        params: {
          app_id: hereKeys.appId,
          app_code: hereKeys.appCode,
          query: query,
          maxresults: 1,
          country: 'USA,MEX,CAN',
        },
      })
      .then(response => {
        address = response.data.suggestions[0].address;
      });
  } finally {
    return address;
  }
};
...