Доступ заблокирован заголовками CORS

Question

Я работаю над проектом с Django, который обслуживает данные через API через Django Rest Framework на интерфейсе React.Браузерный API работает нормально, однако интерфейс реагирует на ошибку в консоли.

Я успешно установил django-cors-headers.

import './App.css';

  class App extends Component {
      state = {
        products: []
      };

      async componentDidMount() {
        try {
          const res = await fetch('http://127.0.0.1:8000/products/');
          const products = await res.json();
          this.setState({
            products
          });
        } catch (e) {
          console.log(e);
        }
      }

      render() {
        return (
          <div>
            {this.state.products.map(products => (
              <div key={products.id}>
                <h1>{products.prodName}</h1>
                <span>{products.description}</span>
              </div>
            ))}
          </div>
        );
      }
    }

    export default App;

Доступ к выборке в 'http://127.0.0.1:8000/products/' из источника' http://localhost:3000' заблокирован политикой CORS: заголовок 'Access-Control-Allow-Origin' отсутствуетзапрашиваемый ресурс.Если непрозрачный ответ отвечает вашим потребностям, установите режим запроса «no-cors», чтобы получить ресурс с отключенным CORS.

Answer 1

это параметры для проверки: 1. Добавьте эту строку в СРЕДНЕЕ ОБЕСПЕЧЕНИЕ в (setting.py)

'corsheaders.middleware.CorsMiddleware',

убедитесь, что у вас есть это:

CORS_ORIGIN_WHITELIST = (
   'localhost:3000/'
)

Также проверьте это:

CORS_ALLOW_METHODS = (
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
)

все эти параметры в файле настроек (setting.py)

Вы пишете fetch ('http://127.0.0.1:8000/products/'), поэтому в вашем url.py убедитесь в обратном слэше:

path('products/', views.products,name='products')