jquery - _find 查询在 ibm cloudant 中不起作用

问题描述

我正在使用 cloudant，CORS 已启用，除_find.

使用以下代码，我的查找查询对本地 CouchDB 运行良好：

var urlPrefix = "http://localhost:5984/etablissements";

var query = {
  "selector": {
   "cp": 24000
  }
};

$.ajax({
    type: "POST",
    url:  urlPrefix + '/_find',
    contentType: "application/json", 
    data:JSON.stringify(query),
    success: function(data) {
           console.log(data.docs);
            // do whatever with data.docs there

     }

 });

现在，我想在线进行 CORS jQuery AJAX 调用，并针对我的 IBM Cloudant 数据库执行与第一个相同的查询，但它不起作用，因为它是相同的查询和相同的复制数据库。

在 Cloudant 上启用了 CORS。

urlPrefix = "https://USERNAME:PASSWORD@HOST.cloudant.com/etablissements";

    var query = {
      "selector": {
       "cp": 24000
      }
    };
    $.ajax({
        type: "POST",
        url:  urlPrefix + '/_find',
        contentType: "application/json", 
        data:JSON.stringify(query),
        dataType: 'json',

        crossDomain: true,
        xhrFields: {
             'withCredentials': true // tell the client to send the cookies if any for the requested domain
          },
        success: function(data) {
            console.log(data.docs);

            }
        },
        error:function(data){
            console.log(data);
        }

     });

我没有收到来自 Cloudant 的任何错误消息。我刚刚从 jQuery 得到这个错误信息：

  {…}

abort: function abort()

always: function always()

catch: function catch()

done: function add()

fail: function add()

getAllResponseHeaders: function getAllResponseHeaders()

getResponseHeader: function getResponseHeader()

overrideMimeType: function overrideMimeType()

pipe: function pipe()

progress: function add()

promise: function promise()

readyState: 0

responseJSON: undefined

setRequestHeader: function setRequestHeader()

state: function state()

status: 0

statusCode: function statusCode()

statusText: "error"

then: function then()

__proto__: Object { … }

此文档中的其他查询（例如“全部”）当前正在工作：

http://bradley-holt.com/2011/07/couchdb-jquery-plugin-reference/

编辑： Glynn，仍然使用最新的 firefox 版本和复制粘贴的代码出现相同的错误，没有完成 ajax 调用，而是通过 jquery 错误过程：

编辑 2：我已经更改了 Glynn 的一些代码，它在 chrome 中工作，但我必须在来自 Chrome 的弹出窗口中提供凭据。请注意，我已经从 urlPrefix 变量中删除了登录密码，并且 jquery 中提供的用户名和密码不起作用。所以这还不是很好的解决方案。Firefox 仍然失败并出现上面显示的错误：

 <html>
    <body>
      <script
        src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
      <script>
     var urlPrefix = "https://1c54473b-be6e-42d6-b914-d0ecae937981-bluemix.cloudant.com/etablissements";
      var query = {
        "selector": {
         "cp": 24000
        }
      };
      $.ajax({
          type: "POST",
          url:  urlPrefix + '/_find',
          contentType: "application/json", 
          data:JSON.stringify(query),
          dataType: 'json',
          crossDomain: true,
          username: "xxxxxxx-xxxxxxx-42d6-xxxxxx-xxxxxx-bluemix",
          password:"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
          xhrFields: {
               'withCredentials': true // tell the client to send the cookies if any for the requested domain
            },
          success: function(data) {
              console.log(data);
          },
          error:function(data){
              console.log(data);
          }
       });
       </script>
    </body>
    </html>

编辑 3：已解决！

我已经成功地在这个页面的帮助下使它工作： https ://zinoui.com/blog/ajax-basic-authentication

所以这是我的最终代码，在 firefox、chrome 和 opera 中测试，终于可以工作了！所以我现在可以在 cloudant 上启用 CORS 进行 _find 查询，我喜欢它！

请注意，解决方案的关键是jquery beforeSend() 函数，您需要在此处提供凭据：

   <html><meta charset="utf-8" />
    <head>
    <title>JS Bin</title>
    </head>

    <body>
      <script
        src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous" charset="utf-8"></script>
      <script>
     var urlPrefix = "https://1c54473b-be6e-42d6-b914-d0ecae937981-bluemix.cloudant.com/etablissements";
     var USERNAME = "xxxxxxxx-xxxxxxxx-42d6-b914-d0ecae937981-bluemix";
     var PASSWORD = "xxxxxxxxxxxxxxxxxb9e74af7368b21a37b531aae819929d3405c7d22";

      var query = {
        "selector": {
         "cp": 24000
        }
      };
      $.ajax({
          type: "POST",
          contentType: "application/json", 
          data:JSON.stringify(query),
          dataType: 'json',
          crossDomain: true,
           xhrFields: {
               'withCredentials': true // tell the client to send the cookies if any for the requested domain
            },
            beforeSend: function (xhr) {
             xhr.setRequestHeader('Authorization', 'Basic '  + btoa(USERNAME + ":" + PASSWORD));
          },
            url:  urlPrefix + '/_find',

          success: function(data) {
              console.log(data);
          },
          error:function(data){
              console.log(data);
          }
       });


       </script>
    </body>
    </html>

做 CORS 应用程序对于构建快速实验室应用程序非常有用！我喜欢这种无服务器技术，请不要停止！

标签： jquerycorscouchdbcloudant

在调试此类瘦身时，我会首先检查您的查询是从 Cloudant 仪表板还是从命令行有效：

curl -X POST \ 
  -d'{"selector": { "cp": 24000}}' \ 
  -H'Content-type: application/json' \
 "https://USERNAME:PASSWORD@HOST.cloudant.com/etablissements/_find"

答案是“是的，它有效！”。你得到一个包含{"docs": [ ... ]}文档数组的对象。

所以我开始测试你的 jQuery 代码，如果你删除函数中的 rogue，它就可以}工作success：

<html>
<body>
  <script
    src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>
  <script>
  var urlPrefix = "https://USERNAME:PASSWORD@HOST.cloudant.com/etablissements";
  var query = {
    "selector": {
     "cp": 24000
    }
  };
  $.ajax({
      type: "POST",
      url:  urlPrefix + '/_find',
      contentType: "application/json", 
      data:JSON.stringify(query),
      dataType: 'json',
      crossDomain: true,
      xhrFields: {
           'withCredentials': true // tell the client to send the cookies if any for the requested domain
        },
      success: function(data) {
          console.log(data.docs);
      },
      error:function(data){
          console.log(data);
      }
   });
   </script>
</body>
</html>

注意请不要在公共域中发布您的 Cloudant 凭据。

jquery - _find 查询在 ibm cloudant 中不起作用

问题描述

解决方案

推荐阅读