问题描述
我已经尝试了几乎所有东西。我的前端是用vue js开发的。后端在laravel中。我们已经为另一个试图获取数据的网站编写了api。如果直接访问该网站网址，它将提供所有数据，但是当我尝试使用axios从我的网站访问它时，则会显示此错误。
Access to XMLHttpRequest at 'https://example.com/api/tickets/fetch_tickets?page=undefined' from origin 'http://localhost:8000' has been blocked by CORS policy: Request header field x-requested-with is not allowed by Access-Control-Allow-Headers in preflight response.
我试图获取数据的网站表单也建立在laravel中。我创建了中间件并将其应用于api路由。我添加了Chrome扩展名Allow Cors，该扩展名可以正常使用，但我们不能要求每个客户端都使用该扩展名。
我们从其他网站访问了该URL，从而很好地访问了数据。只能使用vue js应用创建这些问题。
Vue代码
getTickets() {
axios.get( 'example.com/api/tickets/fetch_tickets?page=' + this.pagination.current,{
}).then((response) => {
// console.log(res.data.data)
// this.desserts = res.data.data;
// this.loadingprop = false;
this.desserts = response.data.data;
this.pagination.current = response.data.current_page;
this.pagination.total = response.data.last_page;
console.log(response.data.data);
}).catch((err) => {
this.handleErrors(err.response.data.errors);
})
.then(() => {
this.loading = false;
});
}
其他网站的路线
Route::group(['middleware' => ['api','cors']],function () {
Route::group(['prefix' => 'tickets'],function () {
Route::post('/store_ticket_auth','TicketApiController@storeTicketAuth'); //enter ticket auth
Route::get('/fetch_tickets','TicketApiController@fetchTickets'); //get all tickets
Route::get('/fetch_replies/{ticket_id}','TicketApiController@fetchTicketReplies'); // get all replies by ticket id
Route::post('/send_reply','TicketApiController@sendTicketReply'); // Send reply
Route::post('/update_ticket','TicketApiController@updateTicketStatus'); // Update Status
});
});
我也需要在当前项目中添加它吗？
return $next($request)
->header('Access-Control-Allow-Origin','*')
->header('Access-Control-Allow-Methods','GET,POST,PUT,DELETE,OPTIONS');
我认为问题出在客户端，但不知道为什么它不起作用。
我在stackoverflow上尝试了所有答案，但没有任何效果
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）