Question

所以我正在创建Google Chrome扩展程序，起初我通过内容脚本注入了我的html，angular和javascripts。不，我需要自己注射它。我做到了！但问题是，当它通过内容脚本注入时，我的登录方法工作得很好，我得到了令牌（这就是我需要的），但是当我自己注入时，我的登录功能不再起作用，它会抛出这个错误：

XMLHttpRequest无法加载http://www.cheapwatcher.com/api/Authenticate。对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许原点“http://anywebsitename.com”访问。响应的HTTP状态代码为400。

这是我的登录方法（自更改注入类型后我没有更改任何内容）：

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的情况下做些什么吗？因为我说通过内容脚本注入工作正常

更新<！/强>

所以我将登录方法从$ http更改为$ .ajax。一切都是相同的而不是$ http我写了$ .ajax并删除了标题部分。在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的索引页面。所以我假设我的登录请求不是来自我的扩展程序，而是来自网站内容。从注入的脚本到后台脚本是否可以进行任何通信？

Answer 1

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

通过将主机或主机匹配模式（或两者）添加到清单文件的权限部分，扩展可以请求访问其原始数据之外的远程服务器。

Answer 2

要在Angular中使用CORS，我们需要告诉Angular我们正在使用CORS。我们用的是我们的Angular应用模块上的.config()方法设置了两个选项。

我们需要告诉Angular使用XDomain和

我们必须从所有请求中删除X-Requested-With标头

angular.module('myApp')
 .config(function($httpProvider) {
    $httpProvider.defaults.useXDomain = true;
    delete $httpProvider.defaults.headers
            .common['X-Requested-With'];
});

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

2 个答案: