koa-cors 和 Access-Control-Allow-Credentials 的问题答案

【问题标题】：Troubles with koa-cors and Access-Control-Allow-Credentialskoa-cors 和 Access-Control-Allow-Credentials 的问题
【发布时间】：2018-03-27 02:49:48
【问题描述】：

我有这个错误

XMLHttpRequest 无法加载 http://127.0.0.1:1337/。对预检请求的响应未通过访问控制检查：响应中“Access-Control-Allow-Credentials”标头的值为“”，当请求的凭据模式为“包含”时，该值必须为“真”。因此，Origin '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.

现在我做错了什么？

【问题讨论】：

参考此链接stackoverflow.com/questions/34078676/…
首先您需要在您的服务器上将 Access-Control-Allow-Credentials 设置为 * 或特定的 url。然后，如果您使用凭据，您还需要在服务器端批准它。 (developer.mozilla.org/en-US/docs/Web/HTTP/CORS)
使用这些步骤进行检查.. 1) 禁用您的 chrome 扩展“Allow-Control-Allow-Origin” 2) 将这些添加到您的服务中 var xhr = new (); xhr.withCredentials = true;
感谢您的所有回答。我删除了xhr.withCredentials = true; 的行，并将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'); 和app.use(function *(){ this.set('Access-Control-Allow-Origin', '*'); }); 添加到server.js。但现在我只有 404 错误，没有其他解释，我的警报弹出 3 次不知何故
我的问题还没有解决。请问有什么建议吗？

标签： javascript jquery cors koa

【解决方案1】：

响应中“Access-Control-Allow-Credentials”标头的值为“”，当请求的凭据模式为“包含”时，该值必须为“真”。

为防止出现该问题，您需要设置 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)
}

【讨论】：

【解决方案2】：

如果请求的 'withCredentials' 为真，则不能使用 Access-Control-Allow-Origin: *，即使没有 Access-Control-Allow-Credentials 标头。

【讨论】：