Laravel 5 + AngularJS跨域CORS [英] Laravel 5 + AngularJS Cross Domain CORS
问题描述
我到处都在寻找答案，但到目前为止没有任何效果.事实证明，所有列出的堆栈解决方案都不足够.
I have searched everywhere for an answer but nothing have worked so far. All the listed solutions on stack have not proven to be sufficient.
我的laravel登录中没有任何错误，并且只有标准错误:
I get nothing in my laravel log in form of errors and I only get the standard:
XMLHttpRequest cannot load http://api.domain.dev/post/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://domain.dev' is therefore not allowed access.
Laravel控制器:
Laravel controller:
<?php namespace App\Http\Controllers;
use App\Http\Requests;
use App\Http\Controllers\Controller;
use App\Post;
use App\Tag;
use Illuminate\Http\Request;
class PostController extends Controller {
/**
* Display a listing of the resource.
*
* @return Response
*/
public function index()
{
$posts = Post::with('user', 'tags')->get();
return response()->json($posts);
}
}
Laravel路线:
Laravel Routes:
<?php
Route::resource('user', 'UserController');
Route::resource('post', 'PostController');
Route::get('post/tag/{tag}', 'PostController@postsWithTag');
Route::resource('tag', 'TagController');
Route::controllers([
'auth' => 'Auth\AuthController',
'password' => 'Auth\PasswordController',
]);
ind肿的种类不整齐:
Kind of bloated not organized angular:
//App
var app = angular.module('app', [
'ngRoute',
'ngAnimate'
]);
//Config
app.config(['$routeProvider', '$locationProvider', '$animateProvider', function($routeProvider, $locationProvider, $animateProvider) {
$locationProvider.html5Mode(true).hashPrefix('!');
$routeProvider.
when('/', {
templateUrl: 'partials/home.html',
controller: 'PageController'
}).
when('/about', {
templateUrl: 'partials/about.html',
controller: 'AboutController'
}).
when('/contact', {
templateUrl: 'partials/contact.html',
controller: 'ContactController'
}).
when('/blog', {
templateUrl: 'partials/blog.html',
controller: 'PostsController'
}).
when('/blog/post/:postId', {
templateUrl: 'partials/post.html',
controller: 'PostController'
}).
otherwise({
redirectTo: '/'
});
}]);
//Factory
app.factory('Data', function Data($http) {
return {
getPosts: function getPosts() { return $http.get('http://api.domain.dev/post/'); },
getPost: function getPost(id) { return $http.get('http://api.domain.dev/post/' + id); },
addPost: function addPost(data) { return $http.post('http://api.domain.dev/post/', data); },
removePost: function removePost(id) { return $http.delete('http://api.domain.dev/post/'+ id); },
getTags: function getTags() { return $http.get('http://api.domain.dev/tag/'); },
getTag: function getTag(id) { return $http.get('http://api.domain.dev/tag/' + id); },
addTag: function addTag(data) { return $http.post('http://api.domain.dev/tag/', data); },
removeTag: function removeTag(id) { return $http.delete('http://api.domain.dev/tag/'+ id); },
}
});
//Posts Controller
app.controller('PostsController', function PostsController($scope, Data) {
Data.getPosts().success(parsePosts);
function parsePosts(data) {
$scope.posts = data;
}
//AddPost
$scope.newPost = { title: '', content: '', resume: '' };
$scope.addPost = function addPost(){Data.addPost({ title: $scope.newPost.title, content: $scope.newPost.content, resume: $scope.newPost.resume, user_id: $scope.newPost.user_id }).success(postAddSuccess).error(postAddError);}
function postAddSuccess(data) {
$scope.error = null;
$scope.posts.push(data);
$scope.newPost = { title: '', content: '', resume: '' };
}
function postAddError(data) {
$scope.error = data;
}
//RemovePost
$scope.removePost = function removePost(id) {
if (confirm('Do you really want to remove this post?')) {
Data.removePost(id).success(postRemoveSuccess);
}
}
function postRemoveSuccess(data) {
var i = $scope.posts.length;
while (i--) {
if ($scope.posts[i].id == data) {
$scope.post.splice(i, 1);
}
}
}
});
//Post Controller
app.controller('PostController', function PostController($scope, $routeParams, Data) {
Data.getPost($routeParams.id).success(parsePost);
function parsePost(data) {
$scope.post = data;
}
Data.getTags($routeParams.id).success(parsePostsTags);
function parsePostsTags(data) {
$scope.tags = data;
}
$scope.newTag = { tag: '' };
$scope.addTag = function addTag() {
$scope.newTag.post_id = $scope.post.id;
Data.addTag($scope.newTag).success(tagAddSuccess).error(tagAddError);
}
function tagAddSuccess(data) {
$scope.error = null;
$scope.tags.push(data);
$scope.newTag = { tag: '' };
}
function tagAddError(data) {
$scope.error = data;
}
$scope.removeTag = function removeTag(id) {
if (confirm('Do you really want to remove this tag?')) {
Data.removeTag(id).success(tagRemoveSuccess);
}
}
function tagRemoveSuccess(data) {
var i = $scope.tags.length;
while (i--) {
if ($scope.tags[i].id == data) {
$scope.tags.splice(i, 1);
}
}
}
});
//About Controller
app.controller('AboutController', function AboutController($scope, Data) {
});
//Portfolio Controller
app.controller('PortfolioController', function PortfolioController($scope, Data) {
});
//Contact Controller
app.controller('ContactController', function ContactController($scope, Data) {
});
//Page Controller
app.controller('PageController', function PageController($scope, Data) {
});
我不知道从这里去哪里.
我已经尝试了从常规header()实现到使用laravel-cors包通过过滤器和控制器中的_construct实现的所有方法.
我还走了服务器配置路线，并尝试将标头添加到.htaccess和virtualhost配置.
I have no clue where to go from here.
I have tried everything from the normal header() implementation to using laravel-cors package to implement via filters and the _construct in the controller.
I have also gone the server config route and tried adding the header to the .htaccess and the virtualhost config.
推荐答案
我遇到了同样的问题，但是使用jQuery并花了我数周的时间才能得到一个好的解决方案.
I had the same problem, but with jQuery and took me weeks to get a good solution.
我的案例是创建一个用于设置标头的中间件，这是一个完美的解决方案.
I my case create an middleware to set headers was the perfect solution.
创建一个Cors中间件:App \ Http \ Middleware \ Cors.php
Create a Cors middleware: App\Http\Middleware\Cors.php
namespace App\Http\Middleware;
use Closure;
class Cors
{
/**
* Handle an incoming request.
*
* @param \Illuminate\Http\Request $request
* @param \Closure $next
*
* @return mixed
*/
public function handle($request, Closure $next)
{
return $next($request)
->header('Access-Control-Allow-Origin', $_SERVER['HTTP_ORIGIN'])
// Depending of your application you can't use '*'
// Some security CORS concerns
//->header('Access-Control-Allow-Origin', '*')
->header('Access-Control-Allow-Methods', 'POST, OPTIONS')
->header('Access-Control-Allow-Credentials', 'true')
->header('Access-Control-Max-Age', '10000')
->header('Access-Control-Allow-Headers', 'Content-Type, Authorization, X-Requested-With');
}
}
请记住在App \ Http \ Kernel中设置Cors别名
Remember to set Cors alias inside App\Http\Kernel
protected $routeMiddleware = [
...
'cors' => \App\Http\Middleware\Cors::class,
];
内部路由，您可以将中间件与组一起使用或直接定向到特定路由，例如:
Inside Routes you can use middleware with group or direct to an specific route, in e.g.:
Route::match(['post', 'options'], 'api/...', 'Api\XController@method')->middleware('cors');
如果有人对jQuery有此问题，我建议使用$ .ajax，而不是$ .get，$.post.当您使用这种方法时，jQuery使用XMLHttpRequest发送数据并将content-type设置为application/x-www-form-urlencoded，无法更改它，因此请使用Ajax.
If someone have this problem with jQuery, I recommend to use $.ajax, instead of $.get, $.post. When you use this methods, jQuery send data using XMLHttpRequest and set content-type to application/x-www-form-urlencoded, it's impossible to change that, so, use Ajax.
例如:
$.ajax({
type: 'POST',
url: 'www.foo.bar/api',
contentType: "application/json",
xhrFields: {
// The 'xhrFields' property sets additional fields on the XMLHttpRequest.
// This can be used to set the 'withCredentials' property.
// Set the value to 'true' if you'd like to pass cookies to the server.
// If this is enabled, your server must respond with the header
// 'Access-Control-Allow-Credentials: true'.
withCredentials: true
},
headers: {
// Set any custom headers here.
// If you set any non-simple headers, your server must include these
// headers in the 'Access-Control-Allow-Headers' response header.
'Accept': 'application/json'
},
data: '{"some":"json data"}',
success: function (data) {
console.log('AJAX version');
console.log("Works!")
},
});
请记住:如果在请求标头上使用application/json，则必须提供"OPTIONS"方法才能进行预检.
Remember: If you are using application/json on request header you must provide "OPTIONS" method, to do a preflight.
有关CORS的更多信息: http://www.html5rocks.com/en/tutorials/cors/
More info about CORS: http://www.html5rocks.com/en/tutorials/cors/
这篇关于Laravel 5 + AngularJS跨域CORS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
