いいえ 'Access-Control-Allow-Origin.Origin' null 'はアクセスが許可されていません。ヘッダーが要求されたリソースエラーに存在する

Question

私のAPI（Laravel frameworkにあります）をangularから呼び出しようとしています。 "XMLHttpRequestはhttp://localhost:8000/inquiryをロードできません。プリフライト要求に対する応答がアクセス制御チェックを通過しません：要求されたリソースに 'Access-Control-Allow-Origin'ヘッダーが存在しません。 'http://localhost'は許可されていませんアクセス。"

これは

var app = angular.module('inquiryForm', []); 

app.controller('mainCtrl', function($scope, $http) { 
    $scope.user = {}; 

    // calling our submit function. 
    $scope.submitForm = function() { 
    alert(JSON.stringify($scope.user)); 
    var data=JSON.stringify("sameer"); 
    // Posting data to php file 
    $http({ 
     method : 'POST', 
     url  : 'http://**.**.**.**/inquiry', 
     data : $scope.user, 
     headers : {'Content-Type': 'application/JSON'} 
    }).success(function(data) { 
     alert(JSON.stringify(data)); 
    }); 
    }  
}); 

私の角度コードであるActully私はlaravelであるつのルートに呼び出しています（のIPアドレスを考慮する。。。上記のURLで）

と私のlaravelルートは： Route :: post（ 'inquiry'、 'inquiryController @ store'）;

これはinquiryController、コントローラ {パブリック関数ストア（要求$要求）を拡張するコントローラ

クラス {$データ= $ requst->すべての（）です。 リターンレスポンス（） - > json（$ data）; } }

Answer 1

このエラーは通常、Javaスクリプトコードが別のドメインまたはプロセスでホストされているhttp要求を送信しようとしたときに発生します。ブラウザはセキュリティ機能の一部としてCross Origin要求を許可しません。したがって、WebサービスのバックエンドでCORS（Cross-Origin Resource Sharing）を有効にする必要があります。下のリンクを参照して試してみてください。

https://github.com/barryvdh/laravel-cors

Answer 2

app.controller('mainCtrl', function($scope, $http) { 
    $scope.user = {}; 
    $scope.submitForm = function() { 
     var settings = { 
      "async": true, 
      "crossDomain": true, 
      "url": 'http://**.**.**.**/inquiry', 
      "method": "POST", 
      "headers": { 
      "content-type": "application/x-www-form-urlencoded", 
      }, 
      "data": $.param($scope.user) // angular may throw error bcz of $.param() method, then u have to use noConflict method and avoid $ symbol 
              //Example: var jq = $.noConflict(); and use jq.param($scope.user) 
     } 
     $http(settings).success(function(data) { 
      console.log(data.data); 
     }); 
    } 
}); 

or 

app.controller('mainCtrl', function($scope, $http) { 
    $scope.user = {}; 
    $scope.submitForm = function() { 
     var settings = { 
      "async": true, 
      "crossDomain": true, 
      "url": 'http://**.**.**.**/inquiry', 
      "method": "POST", 
      "headers": { 
      "content-type": "application/x-www-form-urlencoded", 
      }, 
      "data": $.param($scope.user) // angular may throw error bcz of $.param() method, then u have to use noConflict method and avoid $ symbol 
     } 
     /* http callback method*/ 
     $http(settings)then(function successCallback(data) { 
         console.log(data.data); 
        }, function errorCallback(err){ 
         console.log(err); 
     }); 
    } 
}); 

今、これは動作するはずです....