corsを解決する方法vuejsおよびlaravelアプリケーションでアクセス制御を許可する

Question

私はほとんどすべてを試しました。私のフロントエンドはvuejsで開発されています。バックエンドはlaravelにあります。データを取得しようとしている別のWebサイトの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ルートに適用しました。Allow Cors正常に動作するChrome拡張機能を追加しましたが、すべてのクライアントにその拡張機能を使用するように依頼することはできません。

データにうまくアクセスしている他のウェブサイトからそのURLにアクセスします。これらの問題を作成しているのはvuejsアプリのみです。

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ですべての答えを試しましたが、何も機能しません

Answer 1

これらの行を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 "";
}

Answer 2

エラーは、サーバーがクライアントにx-requested-withヘッダーの使用を許可しないことを示しています。

PHPでは、これを実行して、サーバーがそのヘッダーを受け入れることができるようにすることができます。

header('Access-Control-Allow-Headers: X-Requested-With');