jQuery ajax 等效于 curl 命令 - CORS Spring OAuth 安全性答案

【问题标题】：jQuery ajax equivalent of curl command - CORS Spring OAuth SecurityjQuery ajax 等效于 curl 命令 - CORS Spring OAuth 安全性
【发布时间】：2015-08-12 21:02:34
【问题描述】：

我使用来自https://github.com/royclarkson/spring-rest-service-oauth 的示例创建了一个 Spring Security OAuth 服务器

CURL 命令中的 OAuth 认证请求如下。我想要 jQuery 中的等效语法。

curl -X POST -vu test-rest:test-pswd http://localhost:8080/oauth/token -H "Accept: application/json" -d "password=admin&username=admin&grant_type=password"

这是我尝试过的：

$.ajax({
    url: "http://localhost:8080/oauth/token",
    method: "post",
    username: "test-rest",
    password: "test-pswd",
    contentType: "application/json",
    dataType: 'json',
    data: {
        "grant_type": "password",
        "username": "admin",
        "password": "admin"
    },
    success: function (data) {
        console.log(data);
        retrieveCases();
    },
    error: function () {
        console.log("authorization failed");
    }
});

注意：此请求是跨域请求 (CORS)。我设置了以下响应标头

response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "PUT, POST, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "origin, accept, x-requested-with, content-type, authorization");

【问题讨论】：

contentType: "application/json", 没有意义。你在 data 选项中给了它一个对象而不是一个 json 字符串。（而且您似乎需要对象，而不是 json 字符串。）只需省略 contentType。
您已经向我们展示了您的尝试，但您没有告诉我们结果如何。您是否最终遇到了 CORS 错误？它是否发送了 OPTIONS 请求？它是否发送了 POST 请求？各自的结果是什么？
您的 Content-Type 需要为 application/www-x-form-urlencoded，并且您不需要为数据创建包装 Javascript 对象。您只需要为表单 endcoded 数据类型正确序列化它。
是的，我在 OPTIONS 上得到 401
我想出了一种在服务器实现中允许 OPTIONS 请求的方法。

标签： jquery ajax spring curl oauth

【解决方案1】：

您需要使用 window.btoa(str) 对 client_id + ":" + client_secret 的 base 64 进行编码

var str = client_id + ":" + client_secret;
var enc = window.btoa(str);
var cred = "grant_type=password&username="+ userName +"&password=" + password;

$.ajax({
        type: "POST",
        url: _loginUrl,
        headers:{
            'Authorization':'Basic '+enc,
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        processData: false,
        data : cred,
        success: function (data) {
            console.log('login success ...' + JSON.stringify(data));
        }
    }
);

【讨论】：

【解决方案2】：

OPTIONS 请求 401 已修复。

我收到 POST 401，因为用户名/密码未传递给服务器测试休息：测试-pswd

function authenticate() {
    $.ajax({
        url: "http://localhost:8080/oauth/token",
        method: "POST",
        username: "test-rest",
        password: "test-pswd",
        contentType: "application/www-x-form-urlencoded",
        crossDomain: true,
        async: false,
        cache: false,
        data: {
            "grant_type": "password",
            "username": "admin",
            "password": "admin"
        },
        success: function (data) {
            console.log(data);
            retrieveCases();
        },
        error: function () {
            console.log("authorization failed");
        }
    });
}

【讨论】：