所请求的资源上没有“ Access-Control-Allow-Origin”标头。 因此，不允许访问源“ file：//”。

Question

I have a node.js server which is running locally on my computer. And I am developing html page with js-code:

var MainController = function($scope, $http) {

    var onCountComplete = function(response) {
        $scope.count = response.data;
    };

    var onError = function(reason) {
        $scope.error = "Could not fetch data";
    };

    $http.get("http://localhost:1337/api/count")
        .then(onCountComplete, onError);

    $scope.message = "hello";
};

I get the error when I were running this code:

XMLHttpRequest cannot load http://localhost:1337/api/count . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'file://' is therefore not allowed access.

I have tried to launch the Chrome with --allow-file-access-from-files key, but it doesn't helps. Is there a way to avoid this error during development?

Answer 1

If you're using Apache, you can try this solution. This has worked for me on a few small projects. Just add these lines to your .htaccess file. Customize as needed though, my example below is rather permissive and you may only need POST or a specific origin for example.

Header set Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Methods "GET, POST, OPTIONS, DELETE"
Header add Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type"