当前位置: 首页 > 面试题库 >

Laravel 5 + AngularJS跨域CORS

陈志
2023-03-14
问题内容

我到处都在寻找答案,但到目前为止没有任何效果。事实证明,所有列出的堆栈解决方案都不足够。

我以错误的形式在laravel登录中一无所获,我只得到了标准:

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控制器:

<?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路线:

<?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',
]);

of肿的种类不整齐:

//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配置。


问题答案:

我遇到了同样的问题,但是使用jQuery并花了我数周的时间才能得到一个好的解决方案。

我的情况是创建一个设置头文件的中间件是完美的解决方案

创建一个Cors中间件: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别名

protected $routeMiddleware = [
    ...
    'cors' => \App\Http\Middleware\Cors::class,
];

在Routes内部,您可以将中间件与group一起使用或直接定向到特定的路由,例如:

Route::match(['post', 'options'], 'api/...', 'Api\XController@method')->middleware('cors');

如果有人对jQuery有此问题,我建议使用$ .ajax,而不是$
.get,$。post。当您使用此方法时,jQuery使用XMLHttpRequest发送数据并将content-type设置为application /
x-www-form-urlencoded,无法更改它,因此请使用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”方法来进行预检。

有关CORS的更多信息:http
://www.html5rocks.com/en/tutorials/cors/



 类似资料:
  • 问题内容: 我对带有HTTP授权标头的CORS请求有疑问: 在我看来,Web浏览器未通过POST请求发送Authorization标头,是否有解决方法? 这是我的Angular代码: 在服务器端,我在web.config中有这个 问题答案: 您使用不正确。第二个参数是您需要发送到服务器的 数据 ,您不能设置这样的标头。在您的情况下,它将把 整个对象 作为 JSON有效负载 发送 __ 试试这个:

  • 问题内容: 我有一个使用AngularJS构建的简单网站,该网站调用json数据的API。 但是我遇到了跨域起源问题,是否可以解决跨域请求? 错误: XMLHttpRequest无法加载http://api.nestoria.co.uk/api?country=uk&pretty=1&action=search_listings&place_name=soho&encoding=json&list

  • 我有一个简单的网站,我正在用AngularJS构建,它为json数据调用API。 然而,我得到跨域起源的问题,是否有任何围绕这允许跨域请求? 错误: XMLHttpRequest无法加载http://api.nestoria.co.uk/api?country=uk

  • 我想显示数据从API使用angularJS。当在同一台电脑上运行代码时,这段代码工作正常。但是当我试图在另一台电脑上测试时,它显示错误,请求的资源上没有访问控制允许来源的标头。angularjs 我使用的是1.4.8 这是我的密码:

  • 我试图从我的新Angular应用程序中调用REST web服务。当发出请求时,我会得到以下错误: XMLHttpRequest无法加载http://localhost:8080/WebService。请求的资源上没有“访问-控制-允许-来源”标头。因此,不允许访问源“http://localhost”。 我发现这是因为浏览器不允许这样的操作。 编辑我也试着把它添加到我的angular应用程序中:

  • 本文向大家介绍详解AngularJS如何实现跨域请求,包括了详解AngularJS如何实现跨域请求的使用技巧和注意事项,需要的朋友参考一下 跨域,前端开发中经常遇到的问题,AngularJS实现跨域方式类似于Ajax,使用CORS机制。 下面阐述一下AngularJS中使用$http实现跨域请求数据。 AngularJS XMLHttpRequest:$http用于读取远程服务器的数据 一、$ht