Troubles with koa-cors and Access-Control-Allow-Credentials

Question

I have this error

XMLHttpRequest cannot load http://127.0.0.1:1337/. Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. Origin 'http://localhost:63342' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

I've read here some topics but I haven't found a solution for me. Perhaps I just don't understand how this all works. But still, how can I fix this? Thank you in advance.

server.js

const Koa = require('koa')
const Router = require('koa-router')
const koaBody = require('koa-body')()
const router = new Router({})
const koaCors = require('koa-cors')


router
 .post('/', koaBody, async function (ctx) {
  console.log(ctx.request.body)
  ctx.status = 200
  ctx.body = 'POST'
})
 .get('/', async function (ctx) {
  ctx.status = 200
  ctx.body = 'GET'
 })

exports.createServer = function () {
 const app = new Koa()
 app
  .use(router.routes())
  .use(router.allowedMethods())
  .use(koaCors())
 app.listen(1337)
}

exports.createServer()

index.js

function submitForm(form) {
 let xhr = new XMLHttpRequest()
 xhr.withCredentials = true;
 xhr.open('POST', 'http://127.0.0.1:1337/', true)
 xhr.setRequestHeader('Access-Control-Allow-Origin', '*')
 let formData = new FormData(form)
 let body = {
  name: formData.get('name'),
  password: formData.get('password'),
  message: formData.get('message')
 }
 xhr.onreadystatechange = function() {
  if(xhr.status == 200) {
   alert('Hello!')
  } else {
   alert('Something went wrong')
  }
 }
 xhr.send(JSON.stringify(body))
}

$(document).ready(function () {
 $('#form').submit(function (event) {
  event.preventDefault();
  if (validateForm($form)) {
   $('#modal-form').modal('hide');
   submitForm($form)
  }
  return false;
 })
});

UPDATE:

I fixed server side, I hope. my index.js now:

function submitForm(form) {
let xhr = new XMLHttpRequest()
xhr.withCredentials = true;
xhr.open('POST', 'http://127.0.0.1:1337/', true)
xhr.setRequestHeader('Access-Control-Allow-Origin', '*')
let formData = new FormData(form)
xhr.onreadystatechange = function() {
    if(xhr.status == 200) {
        alert('Hello!')
        console.log(xhr.response);
    } else {
        alert('Something went wrong')
    }
}
xhr.send(formData)

}

and server.js:

router
.post('/', koaBody, function (ctx) {
    console.log(ctx.request.body)
    ctx.status = 200
    ctx.body = 'POST'
})
.get('/', function (ctx) {
    ctx.status = 200
    ctx.body = 'GET'
});exports.createServer = function () {
const app = new Koa()
const koaOptions = {
    origin: true,
    credentials: true
};
app
    .use(router.routes())
    .use(router.allowedMethods())
    .use(cors(koaOptions))
app.listen(1337)}

and again No 'Access-Control-Allow-Origin' header is present on the requested resource.

what now I'm doing wrong?

Refer this link https://stackoverflow.com/questions/34078676/access-control-allow-origin-not-allowed-when-credentials-flag-is-true-but/42108718#42108718 — Jayani Sumudini, Oct 15 '17 at 13:56
First of all you need to set Access-Control-Allow-Credentials on your server as `*` or specific url. Then if you use Credentials you also need to approve it on the server side. (https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) — Krusader, Oct 15 '17 at 13:57
check using these steps.. 1) disable your chrome extension "Allow-Control-Allow-Origin" 2) add these into your service var xhr = new (); xhr.withCredentials = true; — Jayani Sumudini, Oct 15 '17 at 14:00
thank you for all your answers. I've deleted the line with `xhr.withCredentials = true;` and added `ctx.response.header('Access-Control-Allow-Origin', '*'); ctx.response.header('Access-Control-Allow-Methods', 'DELETE'); ctx.response.header('Access-Control-Allow-Headers', 'X-Requested-With,Content-Type');` and `app.use(function *(){ this.set('Access-Control-Allow-Origin', '*'); });` to the server.js. But now I have just 404 error with no other explanations, and my alerts popup 3 times somewhy — 8txra, Oct 15 '17 at 14:45

score 7 · Answer 1 · answered Oct 15 '17 at 19:31

The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'.

To prevent that problem, you need to set the koa-cors credentials option:

exports.createServer = function () {
    const app = new Koa()
    const koaOptions = {
      origin: true,
      credentials: true
    };
    app
        .use(router.routes())
        .use(router.allowedMethods())
        .use(koaCors(koaOptions))
    app.listen(1337)
}

score 4 · Answer 2 · answered Oct 15 '17 at 13:58

4

If the request's 'withCredentials' is true, Access-Control-Allow-Origin: * can't be used, even if there is no Access-Control-Allow-Credentials header.

answered Oct 15 '17 at 13:58

Jayani Sumudini

1,409
2
22
29

Troubles with koa-cors and Access-Control-Allow-Credentials

2 Answers2