Ошибка «Нет заголовка« Access-Control-Allow-Origin »на запрашиваемом ресурсе» даже после установки заголовков на сервере и клиенте

Question

У меня есть серверный сервер NodeJS / Express API, работающий на порте 8002, и приложение ReactJS frontEnd на порте 3000.

Я отправляю форму из веб-приложения activJS для публикации на сервере API, который сохраняет ее в базе данных.

Я вызываю функцию saveAndContinue для отправки формы.

Ниже приведен фрагмент, который делает это:

class Confirmation extends Component{
saveAndContinue = (e) => {
    e.preventDefault();

    console.log("props : " + JSON.stringify(this.props.values));
    var form_id = Math.floor(Math.random() * 1000000); 
    let headers = new Headers();

      headers.append('Content-Type', 'application/json');
      headers.append('Accept', 'application/json');

      headers.append('Access-Control-Allow-Origin', '*');

    fetch("http://localhost:8002/sharepoint/big_data_poc/" + form_id,{
        method:'POST',
        //mode: 'cors',
        body:JSON.stringify(this.props.values),
        headers: headers
    }).then(res => res.json()).then(this.setState({confirmation_id:form_id}))
    .then(response => console.log('Success:', JSON.stringify(response)))
    .catch(error => console.error('Error:', error));
    this.props.nextStep();
}

Также я добавил Access-Control-Allow-Origin в заголовок ответа сервера nodeJS

cb_service.prototype.addForm = function(req,res,form_id, doc_type,payload){
logger.info(JSON.stringify(payload));
bucket.upsert(form_id,payload,function(err,result){
    if(err){
        logger.error("error inserting data in couchbase")
    }
    else {
        res.setHeader('Access-Control-Allow-Origin','*')
        res.setHeader('Access-Control-Allow-Methods','POST, GET, OPTIONS, PUT')
        res.setHeader('mode','cors')
        logger.info("successful inserts");
        res.status(200);

        return res.json({"success":"ok"});       
    }
 })
}

Я не вижу никаких запросов на сервер вообще. Я просто вижу ошибку ниже в консоли браузера:

Не удалось загрузить http://localhost:8002/sharepoint/big_data_poc/944960: Ответ на запрос предварительной проверки не проходит проверку контроля доступа: в запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin». Происхождение 'http://localhost:3000' поэтому не допускается. Если непрозрачный ответ отвечает вашим потребностям, установите режим запроса «no-cors», чтобы получить ресурс с отключенным CORS.

Любая помощь наиболее ценится! Я думаю, что я сделал все, что рекомендовано аналогичными вопросами по SO. Даже Safari выдает следующую ошибку:

[Ошибка] Не удалось загрузить ресурс: Источник http://localhost:3000 не разрешен Access-Control-Allow-Origin. (408661, строка 0)

[Ошибка] Fetch API не может загрузить http://localhost:8002/sharepoint/big_data_poc/408661. Источник http://localhost:3000 не разрешен Access-Control-Allow-Origin.

Большое спасибо!

Answer 1

установите cors и у вас не возникнет никаких проблем const cors = require('cors'); app.use(cors()); ссылка на npm https://www.npmjs.com/package/cors

Answer 2

Попробуйте добавить это промежуточное ПО в ваше приложение

app.use(function (req, res, next) {

// Website you wish to allow to connect
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8888');

// Request methods you wish to allow
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

// Request headers you wish to allow
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');

// Set to true if you need the website to include cookies in the requests sent
// to the API (e.g. in case you use sessions)
res.setHeader('Access-Control-Allow-Credentials', true);

// Pass to next layer of middleware
next();

});