关于javascript：koa-cors和Access-Control-Allow-Credentials的问题


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

我有这个错误

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.

我在这里阅读了一些主题，但没有找到适合我的解决方案。 也许我只是不明白这一切是如何工作的。 但是，我该如何解决呢？
先感谢您。

  • server.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
const Koa = require('koa')
const Router = require('koa-router')
const koaBody = require('koa-body')()
const router = new Router({})
const koaCors = require('koa-cors')


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

exports.createServer = function () {
\tconst app = new Koa()
\tapp
\t\t.use(router.routes())
\t\t.use(router.allowedMethods())
\t\t.use(koaCors())
\tapp.listen(1337)
}

exports.createServer()

  • index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
function submitForm(form) {
\tlet xhr = new XMLHttpRequest()
\txhr.withCredentials = true;
\txhr.open('POST', 'http://127.0.0.1:1337/', true)
\txhr.setRequestHeader('Access-Control-Allow-Origin', '*')
\tlet formData = new FormData(form)
\tlet body = {
\t\tname: formData.get('name'),
\t\tpassword: formData.get('password'),
\t\tmessage: formData.get('message')
\t}
\txhr.onreadystatechange = function() {
\t\tif(xhr.status == 200) {
\t\t\talert('Hello!')
\t\t} else {
\t\t\talert('Something went wrong')
\t\t}
\t}
\txhr.send(JSON.stringify(body))
}

$(document).ready(function () {
\t$('#form').submit(function (event) {
\t\tevent.preventDefault();
\t\tif (validateForm($form)) {
\t\t\t$('#modal-form').modal('hide');
\t\t\tsubmitForm($form)
\t\t}
\t\treturn false;
\t})
});

更新：

我希望固定服务器端。
我的index.js现在：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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.

现在我做错了什么？

相关讨论

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'.

为避免该问题，您需要设置koa-cors credentials选项：

1
2
3
4
5
6
7
8
9
10
11
12
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)
}

如果请求的" withCredentials"为true，则即使没有Access-Control-Allow-Credentials标头，也无法使用Access-Control-Allow-Origin：*。