Angular.js 的 POST 错误

Question

我目前正在尝试使用 laravel 和 angular.js 为威士忌建立一个网上商店。我试图简单地将产品添加到我的购物篮中，但我的控制台中一直出现相同的错误。我只想将我的 product_id 和我的 basket_id 放在“basket_product”列中。现在我想将 product_id 放入 id 为 3 的篮子中。

我已经被这个问题困扰了好几天了，我似乎无法弄清楚。

这些是错误：

这是我的'BasketController.php'

class BasketController extends Controller
{ 
    public function index()
    {
        return Basket::join('basket_product', 'baskets.id', '=', 'basket_product.basket_id')->get();

    }
    public function create()
    {

    }

    public function store(Request $request)
    {
        $rules = [
            'basket_id' => 'required|integer',
            'product_id' => 'required|integer',
        ];

        $this->validate($request, $rules);
        $basket = new Basket($request->only(['basket_id', 'product_id']));

        if ($basket->save()) {
            return response()
                ->json($basket)
                ->setStatusCode(Response::HTTP_CREATED);
        }
    }

    public function show()
    {

    }

}

这是我的'product.controller.js'

vm.$$ix = {
            save : createBasketItemAction
        };

vm.item = {
          basket_id: 3, 
          products_id: $state.params.id

        };

switch ($state.current.name) {
            case 'products.grid':
                vm.products = getProductsAction();
                vm.categories = getCategoryAction();
                break;
            case 'products.show':
                vm.categories = getCategoryAction();
                vm.product = getProductAction();
                vm.$$ix.save = createBasketItemAction;
                break;
            default:
                break;
        }

 function createBasketItemAction() {
            $log.info(createBasketItemAction.name, 'post:', vm.item);

            return BasketResource
                .save(vm.item, success, error);

            function error(error) {
                $log.error(createBasketItemAction.name, 'ERROR', 'error:', error);
            }

            function success(resource, responseHeader) {
                $log.log(createBasketItemAction.name, 'SUCCESS', 'resource:', resource, 'responseHeader:', responseHeader());
                $state.go('blog.posts');
            }
        }

这是我用来在“product.view.html”中触发 post 事件的代码行

<md-button ng-click="vm.$$ix.save()" ng-disabled="postForm.$invalid">Add to Basket</md-button>

最后，这是我的“basket-resource.service.js”

;(function () {
    'use strict';

    angular.module('app.basket')
        .factory('BasketResource', BasketResource);

    /* @ngInject */
    function BasketResource(
        // Angular
        $cacheFactory,
        $resource,
        // Custom
        UriService
    ) {
        var url = UriService.getApi('basket_products');


        var paramDefaults = {

        };

        var actions = {
            'get': {
                method: 'GET',
                isArray: true
            },
        };

        return $resource(url, actions);
    }

})();

这就是我的数据库的构建方式：

提前致谢！

Answer 1

我认为您正在向与您的页面所在的域不同的域执行 XMLHttpRequest。因此浏览器会阻止它，因为出于安全原因，它通常允许同一来源的请求。当您想要进行跨域请求时，您需要做一些不同的事情。关于如何使用 laravel 启用 CORS 的教程：http://en.vedovelli.com.br/2015/web-development/Laravel-5-1-enable-CORS/