web-dev-qa-db-ja.com

koa-corsとAccess-Control-Allow-Credentialsの問題

このエラーがあります

XMLHttpRequestを読み込めません http://127.0.0.1:1337/ 。プリフライトリクエストへの応答がアクセス制御チェックに合格しません：レスポンスの「Access-Control-Allow-Credentials」ヘッダーの値は「」であり、リクエストの資格情報モードが「include」の場合は「true」である必要があります。したがって、オリジン ' http：// localhost：63342 'はアクセスを許可されていません。 XMLHttpRequestによって開始されたリクエストの認証情報モードは、withCredentials属性によって制御されます。

ここでいくつかのトピックを読みましたが、解決策が見つかりませんでした。おそらく、これがどのように機能するのか理解できません。しかし、それでも、どうすればこれを修正できますか？前もって感謝します。

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

更新：

サーバー側を修正したと思います。私の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)

}

および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)}

そしてまた No 'Access-Control-Allow-Origin' header is present on the requested resource.

今私は何を間違っているのですか？

javascriptjquerycorskoa
6
8txra

応答の「Access-Control-Allow-Credentials」ヘッダーの値は「」であり、要求の資格情報モードが「include」の場合は「true」である必要があります。

この問題を防ぐには、koa-cors credentials オプションを設定する必要があります。

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

リクエストの「withCredentials」がtrueの場合、Access-Control-Allow-Credentialsヘッダーがなくても、Access-Control-Allow-Origin：*は使用できません。

4
Jayani Sumudini