Я пытаюсь удалить элементы из приложения TODO, используя axios и django

Question

Я не могу удалить элементы из приложения TODO. Я использую реаги и Axios для удаления. Вот ошибка, которую я получаю во вкладке сети.

Provisional headers are shown
Origin: null
Referer: http://localhost:3000/

handleDelete = item => {
  axios
    .delete(`http://localhost:8000/api/todos/${item.id}`, item)
    .then(res => this.refreshList());
};

Кнопка:

<button onClick={() => this.handleDelete(item)} className="btn btn-danger">
  Delete
</button>

Вот скриншот вкладки сети.

Answer 1

Лучшим решением для этого является прокси API-вызовов для вашего приложения React.Create React App предоставляет вам решение.

Прежде всего я хотел бы сказать, что этот метод применяется только для приложений, созданных с помощью Create React App, а также этот прокси работает только в среде разработки какфункция разработки и недоступна для производственной сборки.Вам просто нужно добавить новый ключ к package.json с именем proxy и затем перезапустить сервер.

"proxy": "http://localhost:8000/",

Теперь ваш полный файл package.json выглядит примерно так:

{
  "name": "project-name",
  "version": "1.0.0",
  "private": true,
  "proxy": "http://localhost:8000/",
  "dependencies": {
    "react": "^16.8.4",
    "react-scripts": "2.1.8"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}

А для запросов DELETE вы можете просто позвонить:

handleDelete = item => {
  axios
    .delete(`/api/todos/${item.id}`, item)
    .then(res => this.refreshList());
};

Приведенный выше код не будет иметь ничего общего с CORS.

Из руководства ...

Имейте в виду, что proxy влияет только на разработку (с npm start), и вы должны убедиться, что URL-адреса, такие как /api/todos, указывают на правильную вещь в производстве,Вам не нужно использовать префикс /api.Любой нераспознанный запрос без заголовка text/html accept будет перенаправлен на указанный proxy.

Так что он действительно специфичен для целей разработки, а не для использования на уровне производства.Это помогает в работе с будущим, где есть подобная настройка, и позволяет избежать сумасшедшей хакерской архитектуры localhost для взаимодействия с окружающей средой.

Я написал пост в блоге, подробно описывающий, как настроить эту вещь - Использование React Proxy, чтобы опередить CORS и использовать HTTPS для вызовов API .Надеюсь, это поможет.