javascript - 无法发送 CORS 查询 : responds with "No ' Access-Control-Allow-Origin' header"

Question

我有一个简单的表单，其中只包含一个我需要解析的 type=file 输入。

我有一个位于不同服务器上的 php 处理程序。我有这些标题:

header("Access-Control-Allow-Origin: *");
header("Content-Type: application/x-www-form-urlencoded;charset=UTF-8;");

这是我的 ajax 查询:

    new Promise((resolve, reject) => {
        let xhr = new XMLHttpRequest();
        xhr.open('POST', 'http://localhost/ajax.php', true);
        xhr.setRequestHeader("Content-type", "multipart/form-data");

        let post = 'ajaxquery=psScript&config=' + JSON.stringify({
            path_to_include: 'include.php'
        });

        xhr.send(post);

        xhr.addEventListener('load', () => {
            resolve(JSON.parse(xhr.response));
        })

        xhr.addEventListener('error', () => {
            reject();
        });
    }).then((response) => {
        console.dir(response);
    });

如标题中所述，它以 No 'Access-Control-Allow-Origin' header is present on the requested resource. 响应。虽然如果我改变这个:

xhr.setRequestHeader("Content-type", "multipart/form-data");

对此:

xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

数据将被发送。但我想，这样我就无法将文件发送到服务器。

这对我来说似乎是一种奇怪的行为。我该如何解决这个问题，为什么会这样？

Answer 1

在您的 PHP 服务器中，您将 header 设置为 header("Content-Type: application/x-www-form-urlencoded;charset=UTF-8;"); 所以如果您尝试将内容类型设置为 multipart/form-data 它不允许。

你需要在服务器中设置这个 header value

header("Access-Control-Allow-Origin: *");
header("Content-Type: multipart/form-data;charset=UTF-8;");