Solution to the failure of Vue request to log in to Laravel cross-domain

Foreword: In actual development, cross-domain requests are a very common problem, especially in front-end and back-end separation projects. If you use Vue as the front-end framework and Laravel as the back-end framework, cross-domain problems may occur when logging in. This article will share how to solve the problem of Vue request to log in to Laravel cross-domain failure.

1. What is cross-domain?

Simply put, cross-domain refers to data requests between two different domain names. For example, in a local development environment, the front-end request address is http://localhost:8080, and the back-end address is http://localhost:8000. If these two addresses are different, cross-domain problems may occur.

2. Why does it fail across domains?

Cross-domain failure is usually caused by the browser's cross-domain policy. By default, browsers block data requests between different domain names to protect user privacy and security. The solution is to configure the backend to allow cross-domain requests.

3. Laravel backend settings allow cross-domain requests

In Laravel, cross-domain requests can be implemented through middleware. The specific steps are as follows:

1. Find the app Cors.php file under /Http/Middleware/, add the following code in the handle method:

header('Access-Control-Allow-Origin: *'); //Set to allow access from all sources
header('Access-Control-Allow-Headers: Origin, Content-Type, Authorization');//Set the header information that allows access
header('Access-Control-Allow-Methods: GET,POST,PUT, DELETE');//Set the method of allowing access
return $response;

2. Apply the Cors middleware to the route, find the app/Http/Kernel.php file, and add the following code:

protected $middlewareGroups = [
'web' => [

  // ...

],
'api' => [

 'throttle:60,1',
 \Illuminate\Routing\Middleware\SubstituteBindings::class,
 \App\Http\Middleware\Cors::class //添加此处

],
];

At this point, the backend has allowed cross-domain requests.

4. Set up cross-domain requests on the Vue front-end

The next step is to set up cross-domain requests in Vue. We can use the Vue-axios plugin to send asynchronous requests and handle responses. Execute the following command in the Vue project to install Vue-axios:

npm install --save axios vue-axios

Then, add the following Vue-axios configuration in main.js:

import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
axios.defaults.withCredentials = true

5. Sending asynchronous requests in the vue project

With the above settings, we have allowed cross-domain requests. In the Vue project, asynchronous requests can be sent in the following ways:

this.$axios.post('/login', {
'username': username, // Parameters passed in the form
'password': password // Parameters passed in the form
}).then(response => {

   // 请求成功回调

}).catch(error => {

   // 请求失败回调

})

Summary: To set up cross-domain requests, you must set the request headers that allow cross-domain requests on the backend and configure Vue-axios on the frontend. Only by adopting these two methods can we ensure that projects with front-end and back-end separation can run smoothly.

The above is the detailed content of Solution to the failure of Vue request to log in to Laravel cross-domain. For more information, please follow other related articles on the PHP Chinese website!