VUE—— axios 对接 laravel5.6 的跨域问题

最新推荐文章于 2023-11-05 10:10:04 发布

傲娇虎

最新推荐文章于 2023-11-05 10:10:04 发布

阅读量381

点赞数 2

分类专栏： VUE Laravel 文章标签： php

本文链接：https://blog.csdn.net/Qjy_985211/article/details/114971602

版权

Laravel 同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

VUE

4 篇文章 0 订阅

订阅专栏

VUE

安装 axios

npm install axios

在 package.json 中查看安装结果：

配置 main.js 文件

// 安装axios
import axios from 'axios';
Vue.prototype.$axios = axios;

发送请求

<script>
    export default {
        created(){
	        this.$axios.get('请求地址')
            //成功调用方法
	        .then(function(res){
		        console.log(res.data)
	        })
            //失败调用方法
	        .catch(function(res){
		        console.log(res)
	        })
        }
    }
</script>

laravel

创建中间件

php artisan make:middleware CrossHttp

在中间件中添加开放域

public function handle($request, Closure $next)
{
    $response = $next($request);
    $response->header('Access-Control-Allow-Origin', '*');
    $response->header('Access-Control-Allow-Headers', 'Origin, Content-Type, Cookie, Accept');
    $response->header('Access-Control-Allow-Methods', 'GET, POST, PATCH, PUT, OPTIONS');
    $response->header('Access-Control-Allow-Credentials', 'false');
    return $response;
}

设置 Kernel.php

protected $middleware = [
    \App\Http\Middleware\CheckForMaintenanceMode::class,
    \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
    \App\Http\Middleware\TrimStrings::class,
    \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
    \App\Http\Middleware\TrustProxies::class,

    \App\Http\Middleware\CrossHttp::class, 
];