Заголовок «Access-Control-Allow-Credentials» в ответе «» при попытке отправить запрос POST в API с помощью Axios - PullRequest
Новая
       40

Заголовок «Access-Control-Allow-Credentials» в ответе «» при попытке отправить запрос POST в API с помощью Axios

0 голосов
/ 08 января 2020

У меня есть приложение реагирования, работающее на localhost: 3000 и сервер nodeJS - express на localhost: 8000, мне нужно отправить запрос POST в API jsreport, но когда я пытаюсь отправить запрос, я получил следующая ошибка:

Доступ к XMLHttpRequest по адресу http://localhost: 5488 / api / report 'from origin' http://localhost: 3000 'имеет был заблокирован политикой CORS: Ответ на запрос предварительной проверки не проходит проверку контроля доступа: Значение заголовка «Access-Control-Allow-Credentials» в ответе равно «», которое должно быть «true», если режим учетных данных запроса 'включают'. Режим учетных данных запросов, инициированных XMLHttpRequest, управляется атрибутом withCredentials.

Почтовый запрос: 

axios.defaults.withCredentials = true;

axios.post('http://localhost:5488/api/report',
{withCredentials: true, crossorigin: true},
{
  "template": {
    "content": "<h1>Hello {{foo}}</h1>",
    "engine": "handlebars",
    "recipe": "chrome-pdf"
  },
  "data": {
    "foo": "world"
  }
}).then((response)=> {
  fs.writeFileSync('/reports/report.pdf', response.content)
}).catch(function (error) {
  console.log('AXIOS error: '+ error);
  return 'errorReport'
})

Сервер. js: 

var corsOptions = {
  origin: 'http://localhost:3000',
  credentials : true
 }
app.use(cors(corsOptions));
app.use((req, res, next) => {
  res.header('Access-Control-Expose-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  res.header("Access-Control-Allow-Origin", "http://localhost:3000");
  res.header("Access-Control-Allow-Credentials", true);
  res.header("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  const err = new Error('Not Found');
  err.status = 404;
  next(err);
})

Я не понимаю, почему учетные данные пусты Если я использую .withCredentials в ax ios и установил заголовки и конфигурацию cors на сервере.

Ответы [ 3 ]

0 голосов
/ 08 января 2020

Из-за политики CORS (совместного использования ресурсов между источниками) вы не можете отправлять запросы на разные источники или на разные источники, на другой порт. Существует два типа запросов, которые вы можете отправлять из источника A в источник B. Первый - простой запрос, а другой - запрос с предварительной проверкой. В вашем вопросе кажется, что ваш браузер отправил предварительный запрос, но вы не вернули правильный ответ.

Я думаю, что ваша проблема заключается в отправке параметра заголовка как логического. Измените эту строку: 

res.header("Access-Control-Allow-Credentials", true);

на: 

res.header("Access-Control-Allow-Credentials", "true");

, и она будет решена.

Более подробная информация здесь: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

0 голосов
/ 09 января 2020

Я использовал следующий код вместо запроса ax ios, и он работал: 

fetch('http://localhost:5488/api/report', {
  method: 'POST',
  body: JSON.stringify(data),
  headers:{
    'Content-Type': 'application/json'
  },
  credentials: "same-origin",
}

Установка учетных данных на "same-origin" устранила проблему, но, поскольку я хотел использовать jsreport, я нашел пакет, чтобы сделать это проще без использования fetch или ax ios. 

import jsreport from 'jsreport-browser-client-dist'
jsreport.serverUrl = 'http://localhost:5488'
jsreport.render(document.getElementById('reportPlaceholder'), data)

Используя методы jsreport, я мог бы показать свой отчет в компоненте реакции 

<div id="reportPlaceholder">
      <p>there should be a report here...</p>
</div>
0 голосов
/ 08 января 2020

Сервер обновлений. js как показано ниже 

var corsOptions = {
  origin: 'http://localhost:3000',
  credentials : true
 }

app.use(cors(corsOptions));

app.use(function (req, res, next) {	
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');    
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');    
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');   
    res.setHeader('Access-Control-Allow-Credentials', true);    
    next();
});
...