Vue.js Vuejs 和 Laravel 发布请求 CORS

发布于06月16日

我不明白.几个小时以来我一直在努力解决这个问题

我正在使用Vue.与Laravel一起使用js，并try 向外部API发出POST请求.

但我的Vue POST请求中总是出现CORS错误

methods: {
            chargeCustomer(){
                this.$http.post('/api/chargeCustomer', this.payment).then(function (response) {
                    console.log(response.data)
                },function (response) {
                    console.log(response.data)
                });
            }
        }

ERROR

无法加载MLHttpRequest

我为我的后端安装了Laravel CORS Package，并将中间件添加到我的路由中，例如

Route::group(['middleware' => 'cors'], function(){
    Route::post('/api/chargeCustomer', 'Backend\PaymentController@chargeCustomer');
});

但我仍然得到了错误.我还try 添加带有

Vue.http.headers.common['Access-Control-Allow-Origin'] = '*';
Vue.http.headers.common['Access-Control-Request-Method'] = '*';

同样的结果/错误.

有人能告诉我我做错了什么吗？

推荐答案

您需要从中间件设置CORS头.也许你需要一些额外的设置？

无论如何，您可以创建自己的中间件，并在handle()方法中设置CORS头，如以下示例所示:

public function handle($request, Closure $next) 
{
    return $next($request)
           ->header('Access-Control-Allow-Origin', 'http://yourfrontenddomain.com') // maybe put this into the .env file so you can change the URL in production.
           ->header('Access-Control-Allow-Methods', '*') // or specify `'GET, POST, PUT, DELETE'` etc as the second parameter if you want to restrict the methods that are allowed.
           ->header('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type, Authorization') // or add your headers.
}

将自定义中间件添加到内核中的全局$middleware数组(CheckForMaintenanceMode::class以下).php课程，你应该准备好了.