如何使用Angular $资源复制此ajax调用？

Question

我正在尝试拨打Mockaroo API。

当我从我的角度应用程序进行相同的调用时，他们在文档工作中使用这个示例（这可能不言而喻 - 但我确实用我自己的api密钥替换了api密钥 - 对于下面的尝试也是如此）

工作示例（使用$ .ajax）

var fields = [{
    name: "yearsEmployed",
    type: "Number",
    min: 1,
    max: 30,
    decimals: 0
}, {
    name: "department",
    type: "Custom List",
    values: ["R+D", "Marketing", "HR"]
}, {
    name: "dob",
    type: "Date",
    min: "1/1/1950",
    max: "1/1/2000",
    format: "%m/%d/%Y"
}];

var url = 'http://www.mockaroo.com/api/generate.json?key=abcd1234' +
  '&fields=' + encodeURIComponent(JSON.stringify(fields));

$.ajax(url, {
    dataType: 'jsonp',
    contentType: 'application/json',
    success: function(data) {
        console.log('yearsEmployed', data.yearsEmployed);
        console.log('department', data.department);
        console.log('dob', data.dob);
    }
});

但是，我想使用角度$资源，但是当我尝试使用这些方法中的任何一种替换上面示例的$.ajax部分时，我会收到错误。完成此任务的正确方法是什么？。

尝试＃1

// using fields variable from above example

var url = 'http://www.mockaroo.com/api/generate.json?key=:key' +
    '&fields=:fields';

var params = {
  key: 'abcd1234',
  fields: fields
}

return $resource(url, params, {
  all: {method:'JSONP', isArray: false }
});

尝试＃1错误：

GET http://www.mockaroo.com/api/generate.json?key=abcd1234&fields=%5Bobject%20Object%5D,%5Bobject%20Object%5D,%5Bobject%20Object%5D 

尝试＃2

// using fields variable from above example

var url = 'http://www.mockaroo.com/api/generate.json?key=:key' +
    '&fields=:fields';

var params = {
  key: 'abcd1234',
  fields: fields
}

return $resource(url, params, {
  all: {method:'POST', isArray: false }
});

尝试＃2错误：

XMLHttpRequest cannot load http://www.mockaroo.com/api/generate.json?key=abcd1234&fields=%5Bobject%20Object%5D,%5Bobject%20Object%5D,%5Bobject%20Object%5D. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access. The response had HTTP status code 400.

尝试＃3：

// using fields AND url variables from example above
return $resource(url, {}, {
    all: {method:'POST', isArray: false }
  });

尝试＃3错误

XMLHttpRequest cannot load http://www.mockaroo.com/api/generate.json?key=abcd1234&fields=%5B%7B%22name…ax%22%3A%221%2F1%2F2000%22%2C%22format%22%3A%22%25m%2F%25d%2F%25Y%22%7D%5D. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.

尝试＃4：

// using fields AND url variables from example above
return $resource(url, {}, {
    all: {method:'JSONP', isArray: false }
  });

尝试＃4错误：

Refused to execute script from 'http://www.mockaroo.com/api/generate.json?key=abc31234&fields=%5B%7B%22name…ax%22%3A%221%2F1%2F2000%22%2C%22format%22%3A%22%25m%2F%25d%2F%25Y%22%7D%5D' because its MIME type ('application/json') is not executable, and strict MIME type checking is enabled.

编辑＃1

更新了尝试＃1

var params = {
  key: 'abcd1234',
  fields: JSON.stringify(fields)
}

更新了尝试＃1错误：

Refused to execute script from 'http://www.mockaroo.com/api/generate.json?key=abcd1234&fields=%5B%7B%22name…2,%22max%22:%221%2F1%2F2000%22,%22format%22:%22%25m%2F%25d%2F%25Y%22%7D%5D' because its MIME type ('application/json') is not executable, and strict MIME type checking is enabled.