javascript - 我的 javascript api 不适用于 "Access-Control-Allow-Origin’ 缺失“错误

Question

这个问题已经有答案了:

XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header (11 个回答)

已关闭 5 年前。

我想调用一个发布以下 JSON 的 API:

    "user": {
        "username": "username",
        "password": "pass",
        "password_confirmation": "passconfirm",
        "user_type": "admin"
    },
    "profile": {
        "first_name": "firstname",
        "last_name": "lastname"
    }

它在 Postman、Android 和 Python 上运行良好，但不幸的是，当我使用以下代码测试 Javascript 时:

function sendData() {
/*
    get json value from HTML form.
*/
    var firstname = document.forms["registerForm"]["first_name"].value;
    var lastname = document.forms["registerForm"]["last_name"].value;
    var pass = document.forms["registerForm"]["password"].value;
    var passconfirm = document.forms["registerForm"]["password_confirmation"].value;
    var username = document.forms["registerForm"]["username"].value;

    var json_date = {
        "user": {
            "username": username,
            "password": pass,
            "password_confirmation": passconfirm,
            "user_type": "admin"
        },
        "profile": {
            "first_name": firstname,
            "last_name": lastname
        }
    };

    var data = JSON.stringify(json_date);
    console.log(json_date);
    var xhr = new XMLHttpRequest();
    xhr.withCredentials = true;

    xhr.addEventListener("readystatechange", function () {
        if (this.readyState === 4) {
            console.log(this.responseText);
        }
    });

    xhr.open("POST", send);
    xhr.setRequestHeader("content-type", "application/json");

    xhr.send(data);

}

我收到此错误:

Reason: CORS hejquery‘Access-Control-Allow-Origin’ missing

我用 , console.log() 打印 json 文件然后我看到了我的 json 文件。

但不发送到服务器。

我也尝试过使用 jQuery。

我必须添加此注释，该服务器是用 RubyOnRails 编写的。

Answer 1

发生这种情况是因为 CORS(跨源资源共享)

Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to let a user agent gain permission to access selected resources from a server on a different origin (domain) than the site currently in use.

例如，如果您想获取存储在 http://foo.com 上的资源，从 http://bar.com 发送请求，您应该添加响应中的 Access-Control-Allow-Origin: * header 。

来源:Server-Side Access Control (CORS)和 Cross-Origin Resource Sharing (CORS)