Question

我不明白。我好几个小时都在努力

我在Laravel中使用Vue.js并尝试向外部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)
                });
            }
        }

错误

MLHttpRequest无法加载 https://www.mollie.com/payscreen/select-method/JucpqJQses。没有＆＃39;访问控制允许来源＆＃39;标题出现在请求的上资源。起源＆＃39; https://payment.dev＆＃39;因此是不允许的访问。

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

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

但我仍然得到错误。我还试图用

添加Vue Headers

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

结果/错误相同。

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

Answer 1

您需要从中间件设置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.
}

将您的自定义中间件添加到Kernel.php类中的全局$middleware数组（在CheckForMaintenanceMode::class下），您应该很高兴。

Answer 2

其他方式（没有创建新的laravel中间件）是在routes.php的开头添加这些头文件.php

header('Access-Control-Allow-Origin:  *');
header('Access-Control-Allow-Methods:  POST, GET, OPTIONS, PUT, DELETE');
header('Access-Control-Allow-Headers:  Content-Type, X-Auth-Token, Origin, Authorization');

并在vue上的拦截器之前添加它： Vue.http.options.crossOrigin = true

Vuejs和Laravel Post请求CORS

2 个答案: