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

Question

I have this error

XMLHttpRequest cannot load http://127.0.0.1:1337/ . The response to the request before the flight does not pass the access control check: the value of the "Access-Control-Allow-Credentials" header in the response is ", which should be" true "when the request credential mode is" enabled. "Origin ' http: // localhost : 63342 'is therefore not allowed. The credential mode of requests initiated by XMLHttpRequest is controlled by the withCredentials attribute.

I read several topics here, but I have not found a solution for me. Maybe I just don’t understand how it 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 hope on the server side. my 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) 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 am i doing wrong now?

Answer 1

If the request "withCredentials" is true, Access-Control-Allow-Origin: * cannot be used, even if there is no Access-Control-Allow-Credentials header.

Answer 2

The value of the "Access-Control-Allow-Credentials" header in the response is ", which should be" true "when the request credential mode is" include ".

To prevent this problem, you need to set the kaa-cors credentials parameter:

 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) }