Почему запрос из неизвестного источника был заблокирован?

Как исправить ошибку CORS в запросе с использованием fetch() и настройке сервера через Node.js и Express?
  • 6 марта 2024 г. 21:08
Ответы на вопрос 2
Запрос из неизвестного источника был заблокирован из-за политики безопасности браузера CORS (Cross-Origin Resource Sharing). CORS - это механизм, который позволяет серверу указывать, какие домены имеют разрешение на доступ к ресурсам на сервере. Большинство браузеров устанавливают политику CORS для защиты пользователей от возможных безопасностных угроз.

Для исправления ошибки CORS в запросе с использованием fetch() и настройке сервера через Node.js и Express, вам необходимо добавить заголовки CORS в ответ сервера. Вы можете сделать это с помощью пакета npm cors и middleware cors в Express.

Вот пример кода, как это сделать:

1. Установите пакет cors:
```
npm install cors
```

2. Импортируйте модуль cors и используйте его в качестве middleware в вашем Express сервере:
```javascript
const express = require('express');
const cors = require('cors');

const app = express();
app.use(cors());

// Роуты и обработчики запросов

app.listen(3000, () => {
  console.log('Сервер запущен на порту 3000');
});
```

3. В вашем клиентском коде (используя fetch()), укажите, что запрос является cross-origin и отправляйте заголовки Origin:
```javascript
fetch('http://example.com/api/data', {
  method: 'GET',
  headers: {
    'Origin': 'http://mywebsite.com'
  }
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Произошла ошибка:', error));
```

После добавления заголовков CORS на сервере и указания Origin в запросе с использованием fetch(), ошибка CORS должна быть исправлена, и запрос должен быть успешно обработан сервером.
Убедитесь, что ваш сервер правильно отвечает на запросы OPTIONS. Добавьте OPTIONS в список Access-Control-Allow-Methods. 
CORS Preflight
Похожие вопросы