Vuejs和Laravel发布请求CORS
我没有明白。 几小时以来我一直在努力
我在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。 请求的资源上没有“Access-Control-Allow-Origin”标题。 原因'https://payment.dev'因此不被允许访问。
我为我的后端安装了Laravel CORS软件包，并将中间件添加到了我的路由中
Route::group(['middleware' => 'cors'], function(){
Route::post('/api/chargeCustomer', 'BackendPaymentController@chargeCustomer');
});
但我仍然收到错误。 我也尝试添加Vue Headers
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.
}
将您的自定义中间件添加到Kernel.php类中的全局$middleware数组（在CheckForMaintenanceMode::class ），您应该很好。
其他方法（不创建新的laravel中间件）是在routes.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