title: Troubles with koa-cors and Access-Control-Allow-Credentials
body: <p>I have this error </p>
  
  <blockquote>
    <p>XMLHttpRequest cannot load <a href="http://127.0.0.1:1337/" rel="noreferrer">http://127.0.0.1:1337/</a>. 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 '<a href="http://localhost:63342" rel="noreferrer">http://localhost:63342</a>' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.</p>
  </blockquote>
  
  <p>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.</p>
  
  <ul>
  <li>server.js</li>
  </ul>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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()</code></pre>
  </div>
  </div>
  </p>
  
  <ul>
  <li>index.js</li>
  </ul>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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;
   })
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>UPDATE:</p>
  
  <p>I fixed server side, I hope.
  my index.js now:</p>
  
  <pre><code>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)
  </code></pre>
  
  <p>}</p>
  
  <p>and server.js:</p>
  
  <pre><code>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)}
  </code></pre>
  
  <p>and again <code>No 'Access-Control-Allow-Origin' header is present on the requested resource.</code></p>
  
  <p>what now I'm doing wrong?</p>