我几乎尝试了一切。我的前端是用 vue js 开发的。后端在 Laravel 中。我们已经为另一个网站编写了 api，我们试图从该网站获取数据。如果直接访问该网站 Url，它会提供所有数据，但是当我尝试使用 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，它可以正常工作，但我们不能要求每个客户都使用该扩展。
我们从其他可以很好地访问数据的网站访问该网址。只有 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 上的所有答案，但没有任何效果
最佳答案
我必须在 laravel 的 index.php 文件中添加这些行
header("Access-Control-Allow-Origin: *");
//header("Access-Control-Allow-Methods", "DELETE, POST, GET, OPTIONS");
header("Access-Control-Allow-Headers:*");
if ($_SERVER['REQUEST_METHOD'] == "OPTIONS") {//send back preflight request response
return "";
}
关于laravel - 如何解决vue js和laravel应用程序中cors允许访问控制，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63537112/