laravel AngularJS 跨域发布
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23744645/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS Cross Domain Post
提问by muuk
I am trying to make an application using AngularJS and Laravel. However when I try to submit a form via $http in angular, I get the error:
我正在尝试使用 AngularJS 和 Laravel 制作一个应用程序。但是，当我尝试通过 $http 以 angular 提交表单时，出现错误：
XMLHttpRequest cannot load http://api.domain.com/api/route.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://localhost' is therefore not allowed access.
I have googled a lot and tried many things. I should note that GET requests to the api do work. Because it is going to be a phonegap app, I have to allow all domains in the access-control-allow-origin header. Here is my code:
我用谷歌搜索了很多并尝试了很多东西。我应该注意到对 api 的 GET 请求确实有效。因为它将成为一个 phonegap 应用程序，所以我必须在 access-control-allow-origin 标头中允许所有域。这是我的代码：
app.config(function($httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common["X-Requested-With"];
});
appControllers.controller("ownController", function($scope, $http){
$scope.categories = [
{id: 1, name: "jeMoeder"},
{id: 2, name: "jeMoeder"},
{id: 3, name: "jeMoeder"},
{id: 4, name: "jeMoeder"},
{id: 5, name: "jeMoeder"},
{id: 6, name: "jeMoeder"},
{id: 7, name: "jeMoeder"}
];
$scope.add = function (hype) {
$http({
method: "POST",
url: "http://api.domain.com/api/route",
data: "author_email=" + hype.author_email + "&category=" + hype.category + "&short_desc=" + hype.short_desc + "&description=" + hype.description,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).success(function (data) {
console.log(data);
});
};
});
<section class="own">
<div class="form container">
<form data-ng-submit="add(hype)">
<div class="input-container">
<input type="text" name="email" placeholder="Email" class="input" data-ng-model="hype.author">
</div>
<div class="input-container">
<span class="input-label left">Category:</span>
<select name="category" class="input right" data-ng-model="hype.category">
<option data-ng-repeat="category in categories" value="{{category.id}}">{{category.name}}</option>
</select>
<div class="clearfix"></div>
</div>
<div class="input-container">
<textarea name="eyecatcher" placeholder="Describe your hype, short!" class="input" rows="2" data-ng-model="hype.short_desc"></textarea>
<div id="count-overlay">Characters left: {{255-hype.short_desc.length}}</div>
</div>
<div class="input-container">
<textarea name="description" placeholder="In depth description of your hype..!" class="input" rows="8" data-ng-model="hype.description"> </textarea>
</div>
<div class="controls">
<a href="#/" class="btn left btn-own-hype">Cancel</a>
<input type="submit" value="Send hype!" class="btn right btn-party">
<div class="clearfix"></div>
</div>
</form>
</div>
</section>
And on the server:
在服务器上：
App::before(function($request)
{
if($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
$statusCode = 204;
$headers = [
'Access-Control-Allow-Origin' => '*',
'Access-Control-Allow-Methods' => 'GET, POST, PUT, DELETE, OPTIONS',
'Access-Control-Allow-Headers' => 'Content-Type'
];
return Response::make(null, $statusCode, $headers);
}
});
App::after(function($request, $response)
{
$response->headers->set('Access-Control-Allow-Origin', '*');
$response->headers->set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
$response->headers->set('Access-Control-Allow-Headers', 'Content-Type');
return $response;
});
回答by muuk
Ok I found out how to do it. It was something with apache not accepting my headers. So I added this line to the .htaccess in laravel's public folder:
好的，我找到了怎么做。这是 apache 不接受我的标题的原因。所以我将此行添加到 laravel 公共文件夹中的 .htaccess 中：
Header set Access-Control-Allow-Origin "http://myexternaldomain.com"
Hope this helps people out.
希望这可以帮助人们。
回答by Marcin Miko?ajczyk
send data like
发送数据，如
$http({
method : "POST",
url : url,
data : $.param({key: 'value', key2 : 'value'}),
headers : { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }
})
and if your url is "localhost" then no wonder it doesnt work.. contact via your PCs(Servers) IP, eg 192.168.0.1
如果您的 url 是“localhost”，那么难怪它不起作用.. 通过您的 PC（服务器）IP 联系，例如 192.168.0.1
