角js $ http post与laravel [英] angular js $http post with laravel
问题描述
问题
当我尝试POST数据时，出现错误。当然，我做错了什么，也是即时新的角度。当我做GET一切工作正常，但我不知道如何做POST。
控制器
myApp.controller（'createListController'，['$ scope'，'$ log'，'$ http'，
函数（$ scope，$ log， $ http $ {
method：'POST'，
url：'http：// localhost：8888 / lists'，
data：$ scope.name
}）
}]）;
HTML
< form method =postaction =>
< label>列表名称< / label>
< input type =textng-model =namename =nameclass =form-controlplaceholder =Type list name/>
< button type =submitng-model =submitname =submitclass =btn btn-primary form-control> Add list< / button>
< / form>
Laravel rout.php
Route :: group（['middleware'=&'; cors']，function（）{
Route :: get（'lists'，'ListsController @index'）;
Route :: post（'lists'，'ListsController @ store'）;
}）;
Laravel中间件
class Cors
{
public function handle（$ request，Closure $ next）
{
$ response = $ next（$请求）;
$ response-> headers-> set（'Access-Control-Allow-Origin'，'*'）;
$ response-> headers-> set（
'Access-Control-Allow-Headers'，
'Authorization，Content-Type，If-Match，If-Modified-Since， If-None-Match，If-Unmodified-Since'
）;
$ response-> headers-> set（'Access-Control-Allow-Credentials'，'true'）;
$ response-> headers-> set（'Access-Control-Allow-Methods'，'*'）;
返回$ response;
}
}
Laravel kernel.php
受保护的$ routeMiddleware = [
'cors'=> \App\Http\Middleware\Cors :: class，
];
尝试用解决问题
myApp.controller（'createListController'，['$ scope'，'$ log'，'$ http'，
function（$ （$ scopesubmit == true）{
$ http（{
method：'POST'，
url：'http：// localhost：8888 / lists'，
data：{name：'text'}
}）
.success（function（）{
console.log（'true'）;
））
.error（function（）{
console.log（'false'）;
} ）
}
}]）;
但它不工作。我不知道我做错了什么，以及如何发布数据。
错误信息
来自控制台的错误：XMLHttpRequest无法加载localhost：8888 / lists。请求的资源上没有Access-Control-Allow-Origin标题。 Origin'localhost';因此不允许访问。
问题
如何解决此错误并获得有角度的js $ http post与laravel？
我的意见
我认为在角度控制器中有错误，它不能从表单或类似的东西获取数据。
>解决方案我自己解决了问题。
在1st中，我使角度控制器正常工作：
myApp.controller（'createListController'，['$ scope '，'$ log'，'$ http'，
函数（$ scope，$ log，$ http）{
$ scope.addList = function（）{
var list = {
name：$ scope.listname
};
$ http（{
method：'POST'，
url：'http： // localhost / anydocopy / public / lists'，
data：list
））
$ b $ .success（function（）{
console.log（'true' ）;
。）
.error（function（）{
console.log（'false'）;
}）
}
}]）;
在第二部分中，我将ng模型参数设置为输入文本并将ng参数设置为按钮： p>
< label>列表名称< / label>
< input type =textng-model =listnameclass =form-controlplaceholder =Type list name/>
< button type =submitng-click =addList（）name =submitclass =btn btn-primary form-control> Add list< / button>
在POST方法中，域名不能有差异（至少在角度上），所以我不会不使用本地主机：8888，但使用完整路径本地主机/文件夹/ ..它为我工作。现在我可以将数据从前端发布到后端。
Problem
When I try to POST data I get error. For sure I do something wrong, also im new at angular. When I do GET all work fine, but Im not sure how to do POST.
Controller
myApp.controller('createListController', ['$scope', '$log', '$http',
function($scope, $log, $http){
$http({
method: 'POST',
url: 'http://localhost:8888/lists',
data: $scope.name
})
}]);
HTML
<form method="post" action="" >
<label>List name</label>
<input type="text" ng-model="name" name="name" class="form-control" placeholder="Type list name" />
<button type="submit" ng-model="submit" name="submit" class="btn btn-primary form-control">Add list</button>
</form>
Laravel rout.php
Route::group(['middleware' => 'cors'], function () {
Route::get('lists', 'ListsController@index');
Route::post('lists', 'ListsController@store');
});
Laravel middleware
class Cors
{
public function handle($request, Closure $next)
{
$response = $next($request);
$response->headers->set('Access-Control-Allow-Origin', '*');
$response->headers->set(
'Access-Control-Allow-Headers',
'Authorization, Content-Type, If-Match, If-Modified-Since, If-None-Match, If-Unmodified-Since'
);
$response->headers->set('Access-Control-Allow-Credentials', 'true');
$response->headers->set('Access-Control-Allow-Methods', '*');
return $response;
}
}
Laravel kernel.php
protected $routeMiddleware = [
'cors' => \App\Http\Middleware\Cors::class,
];
}
Attempted to solve with
myApp.controller('createListController', ['$scope', '$log', '$http',
function($scope, $log, $http){
if ($scope.submit == true){
$http({
method: 'POST',
url: 'http://localhost:8888/lists',
data: {name: 'text'}
})
.success(function () {
console.log('true');
})
.error(function(){
console.log('false');
})
}
}]);
But it's not working too. I don't know what I do wrong and how to post data right..
Error message
Error from console: XMLHttpRequest cannot load localhost:8888/lists. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'localhost'; is therefore not allowed access.
Question
How do I solve this error and get angular js $http post with laravel?
My opinion
I think there is something wrong in angular controller, it can't get data from form or something like that maybe.
Solution
I got solution by my self. At 1st I make my angular controller work properly :
myApp.controller('createListController', ['$scope', '$log', '$http',
function($scope, $log, $http ){
$scope.addList = function () {
var list = {
name: $scope.listname
};
$http({
method: 'POST',
url: 'http://localhost/anydocopy/public/lists',
data: list
})
.success(function () {
console.log('true');
})
.error(function(){
console.log('false');
})
}
}]);
At 2nd I set ng-model parameter to input text and ng-click parameter to button:
<label>List name</label>
<input type="text" ng-model="listname" class="form-control" placeholder="Type list name" />
<button type="submit" ng-click="addList()" name="submit" class="btn btn-primary form-control">Add list</button>
At 3rd with POST method domains can't be different (at least in angular), so I don't use localhost:8888, but use full path localhost/folder/.. and it worked for me. Now I can POST data from frontend to backend.
这篇关于角js $ http post与laravel的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
