javascript 注入(inject) $http post 方法不起作用

Question

所以我正在创建 Google Chrome 扩展，起初我是通过内容脚本注入(inject)我的 html、angular 和 javascript。不，我需要自己注入(inject)。我做到了!但问题是，当它通过内容脚本注入(inject)时，我的登录方法工作得很好，作为返回，我得到了 token (这就是我需要的)，但是当我自己注入(inject)时，我的登录功能不再工作，它会抛出这个错误:

XMLHttpRequest cannot load http://www.cheapwatcher.com/api/Authenticate. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://anywebsitename.com' is therefore not allowed access. The response had HTTP status code 400.

这是我的登录方法(自从更改注入(inject)类型后我没有更改任何内容):

angular.module('app').controller('LoginController', LoginController);

LoginController.$inject = ['$scope', '$http', '$location', '$state'];

function LoginController($scope, $http, $location, $state) {
    $scope.login = function (user) {
        user.grant_type = 'password';
        return $http({
            method: 'POST',
            url: 'http://www.cheapwatcher.com/api/Authenticate',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
                'Access-Control-Allow-Origin': '*'
            },
            transformRequest: function (obj) {
                var str = [];
                for (var p in obj)
                    str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
                return str.join("&");
            },
            data: user
        }).success(function (result) {
            console.log(result);
            $(".cheap-watcher").fadeOut(1500, function () {                         
                $(".cheap-watcher").fadeIn($state.go("logout"), {}, { location: false }).delay(2000);
            })
        }).error(function (result) {
            console.log(result);
        });      
    };
};

我可以在不在服务器端创建 CORS 的情况下做一些事情吗？因为正如我所说，通过内容脚本注入(inject)效果很好

更新!

所以我将登录方法从 $http 更改为 $.ajax。一切都是一样的，只是我写了 $.ajax 并删除了标题部分，而不是 $http。在 chrome 源代码管理中，错误是相同的，但现在在 fiddler 中，我可以看到我的请求成功了。这怎么可能？

现在登录方法如下所示:

angular.module('app').controller('LoginController', LoginController);

LoginController.$inject = ['$scope', '$http', '$location', '$state'];

function LoginController($scope, $http, $location, $state) {
    $scope.login = function (user) {
        user.grant_type = 'password';
        return $.ajax({
            url: "http://www.cheapwatcher.com/api/Authenticate",
            crossDomain: true,
            contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
            method: 'POST',
            transformRequest: function (obj) {
                var str = [];
                for (var p in obj)
                    str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
                return str.join("&");
            },
            data: user
        }).success(function (result) {
            console.log(result);
            $(".cheap-watcher").fadeOut(1500, function () {
                $(".cheap-watcher").fadeIn($state.go("logout"), {}, { location: false }).delay(2000);
            })
        }).error(function (result) {
            console.log(result);
        });
    };
};

更新 NR。 2!

我看到错误来自 http://anywebsitename.com的索引页。所以我假设我的登录请求不是从我的扩展程序而是从网站内容运行的。是否存在从注入(inject)脚本到后台脚本的任何通信？

Answer 1

看看Requesting cross-origin permissions ，您可以将 http://www.cheapwatcher.com/api/Authenticate 添加到 permissions 部分。

By adding hosts or host match patterns (or both) to the permissions section of the manifest file, the extension can request access to remote servers outside of its origin.