fruitcake / laravel-cors

Adds CORS (Cross-Origin Resource Sharing) headers support in your Laravel application
MIT License
6.27k stars 613 forks source link

Access-Control-Allow-Origin is missing laravel-9 and vuejs3 #568

Closed Alireza-Moh closed 2 years ago

Alireza-Moh commented 2 years ago

I have a vue3-frontend and a laravel9-backend. I want to send data to the backend using the fetch-api in vue and get the response but unfortunately I get this error message when I click the submit button. Does anyone have an idea how I can solve the problem ?

I tried the fruitcake/laravel-cors library but it still did not work


<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Cross-Origin Resource Sharing (CORS) Configuration
    |--------------------------------------------------------------------------
    |
    | Here you may configure your settings for cross-origin resource sharing
    | or "CORS". This determines what cross-origin operations may execute
    | in web browsers. You are free to adjust these settings as needed.
    |
    | To learn more: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
    |
    */

    'paths' => ['api/*', 'sanctum/csrf-cookie'],
![Screenshot 2022-10-26 192422](https://user-images.githubusercontent.com/76398431/198107576-0110a529-fc2a-48d3-9f69-ef2dc4283b7c.png)

    'allowed_methods' => ['*'],

    'allowed_origins' => ['*'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => false,

];

vuejs-code

methods: {
    registerUser() {
      fetch("http://localhost:8000/api/tippspiel/register", {
        method: "POST",
        body: JSON.stringify({
          email: this.email,
          username: this.username,
          password: this.password,
          passwordConfirmation: this.passwordConfirmation,
        }),
        headers: {
          'Content-type': 'application/json; charset=UTF-8',
        },
      }).then((response) => {
        return response.json();
      }).then((data) => {
        console.log(data);
      })
    }
  }
controlelr code laravel

    public function register(Request $request)
    {
        $data = $request->validate([
            "email" => "required|email",
            "username" => "required|min:6|max:15",
            "password" => "required|min:12|max:40",
            "passwordConfirmation" => "required|same:password",
            "ageCheck" => "required|accepted",
            "privacyCheck" => "required|accepted"
        ]);
        return [
            "status" => "ok",
            "id" => 1,
            "username" => $request->username
        ];
    }