Laravel框架制作接口+axios跨域访问

最新推荐文章于 2024-08-09 08:27:17 发布
最新推荐文章于 2024-08-09 08:27:17 发布
阅读量902 收藏 2
点赞数 1
分类专栏： 后端 文章标签： laravel 前端 php 后端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52164347/article/details/125585995
版权
本文介绍了如何使用Laravel框架创建接口，并结合Axios解决跨域访问问题。首先解释了跨域访问和同源策略，接着详细讲解了启动服务、创建Laravel项目、数据库操作、路由设置以及前端Axios发送请求和解析JSON数据的步骤。通过这个教程，读者可以学习到Laravel与Axios结合实现前后端交互的方法。
摘要由CSDN通过智能技术生成

目录

前言

一、Axios是什么？

二、Laravel是什么？

三、使用步骤

1.启动服务

2.创建Laravel项目

3.数据库数据表的创建

4.创建路由

4.Axios发送请求

5.最后解析json数组

总结

前言

        通过简单的案例来解决跨域访问的问题。echarts图表的数据均来自后台数据库。

        首先，来讲讲什么是跨域访问，跨域访问是当一个资源从与该资源本身所在的服务器不同的域或端请求一个资源时，资源会发起一个跨域HTTP请求。举个例子：www.jd.com 与 www.taobao.com ，他们的域名不同，所以属于跨域。如果域名和端口都相同，但是请求路径不同，不属于跨域。

       在解决这个问题我们还需要知道同源策略的概念，目前，所有测览器都实行这个政策。同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。随着互联网的发展，“同源政策”越来越严格。目前，如果非同源，共有三种行为受到限制:】

1.Cookie、LocalStorage和IndexDB无法读取
2.DOM无法获得
3.AJAX请求不能发送
虽然这些限制是必要的，但是有时很不方便，合理的用途也受到影响。

一、Axios是什么？

        Axios，是一个基于promise 的网络请求库，作用于node.js和浏览器中，它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生node.js http模块, 而在客户端 (浏览端) 则使用XMLHttpRequest（AJAX）。

二、Laravel是什么？

        Laravel是一套简洁、优雅的PHP Web开发框架(PHP Web Framework)。它可以让你从面条一样杂乱的代码中解脱出来；它可以帮你构建一个完美的网络APP，而且每行代码都可以简洁、富于表达力。

三、使用步骤

1.启动服务

        1.XAMPP（Apache+MySQL+PHP+PERL）是一个功能强大的建站集成软件包,启动APache和Mysql服务。

2.创建Laravel项目

       1、.Laravel6的项目：链接: https://pan.baidu.com/s/175j2RxnURan2D4XrMQQtSQ 提取码: 792q （也可以不需要使用Laravel框架,直接使用原始的php访问mysql数据库也是可以的）

        2、先安装Composer工具；通过“composer global require "laravel/installer"”命令安装“Laravel安装器”；执行“laravel new 项目名”命令来创建项目即可。

        3.将创建好的Larvael项目放在xampp文件目录下的htdocs文件下。在浏览器中输入

最低0.47元/天 解锁文章
MAO0209
关注
专栏目录
axios 搭配laravel无法跨域问题解决
qq_38358436的博客
01-31 699
https://learnku.com/laravel/t/12584/unable-to-cross-domain-axios-get-x-csrf-token-does-not-allow-access-control-allow-headerss-preflight-response https://learnku.com/articles/6504...
laravel的接口开发
09-02
laravel5.5接口开发，使用第三方插件，大家可以看看看看
探索Laravel的CORS中间件：简化跨域资源共享
最新发布
gitblog_00746的博客
08-09 815
探索Laravel的CORS中间件：简化跨域资源共享 laravel-corsAdds CORS (Cross-Origin Resource Sharing) headers support in your Laravel application项目地址:https://gitcode.com/gh_mirrors/la/laravel-cors 在现代Web开发中，跨域资源共享（CORS）是...
laravel 接口跨域
weixin_30687811的博客
10-23 91
最方便的方法，新建一个middleWare,把这个middleware加入到全局中间件，所有的请求，都会经过这个中间件的过滤。 php artisan make:middleware CrossHttp 然后就会在\app\Http\Middleware\CrossHttp.php这个中间件，在handle方法里面添加如下代码： public function handle(...
laravel 接口
Anonymous
09-27 742
namespace App\Services\Common; use League\Flysystem\Exception; use Illuminate\Support\Facades\Storage; use Illuminate\Support\Facades\Mail; use Illuminate\Support\Facades\DB; use App\Models\Common\Co...
Laravel处理接口跨域问题
u013787599的博客
10-23 2256
感谢 @爱你爱自己 的博文 转载来源：https://www.cnblogs.com/grimm/p/8625764.html 文章目录laravel 5.5 跨域问题解决方案一、laravel-Cors1.安装2.添加服务提供商3.发布配置文件4.安装完成5.备注二、中间件方法三、服务器端限制 laravel 5.5 跨域问题解决方案 一、laravel-Cors 1.安装 在终端执行安装命令如...
Vue 3.x+axios跨域方案的踩坑指南
10-16
跨域问题是在开发过程中不可避免的，特别是在前端使用Vue3.x框架结合axios库进行开发时。跨域请求是指前端代码试图从不同的域（协议、域名或端口）访问资源，出于安全原因，浏览器默认禁止这种行为。 在开发环境下...
Vue-cli3.x + axios 跨域方案踩坑指北
10-16
在开发过程中，由于浏览器的同源策略限制，前端应用（通常运行在本地开发服务器，如 `webpack.devServer`）在访问不同源的后端API时会遇到跨域问题。Vue-cli 3.x 提供了一个解决方案，即使用 `axios` 进行数据请求，...
Laravel5.7 跨域解决
weixin_30908103的博客
02-28 341
先检查app/Http/Middleware/ 下是否有EnableCrossRequestMiddleware.php 这个文件，没有此文件使用此命令创建 php artisan make:middleware EnableCrossRequestMiddleware 然后修改EnableCrossRequestMiddleware.php 的handle /** ...
Laravel开启跨域请求的方法
01-03
项目中用到了接口，外部调用的时候老是请求不到，本地请求却没问题，查了下说是因为跨域的问题。 根据网上所说解决方法如下： 1、建立中间件Cors.php 命令：php artisan make:middleware Cors 在/app/Http/Middleware/ 目录下会出现一个Cors.php 文件。 2、在handle 方法中加入如下内容： $response = $next($request); $response->header('Access-Control-Allow-Origin', '*'); $response->header('Access-Control-
Laravel API 允许跨域请求
吴家健ken的博客
05-15 348
因为想作用在api的路由中，所以可以在Kernel.php 中设置。也可以放在 $middleware 中，这样就全局有效了！创建一个中间件 CrossMiddleware。废话不多说，直接上代码。
laravel 使用中间件解决跨域问题
weixin_41688720的博客
01-16 1073
创建中间件： php artisan make:middleware CrossHttp 在中间件的中添加下列代码：这个是所有域都能访问 public function handle($request, Closure $next) { $response = $next($request); $response->header('Acces...
laravel接口访问跨域解决
vio小黑
12-28 2482
原文：https://blog.csdn.net/cominglately/article/details/80381567 场景 . laravel作为后端API使用的时候，前端ajax请求的时候 遇到跨域的问题 1 解决 . laravel5.5 barryvdh/laravel-cors 使用方法很简单 1 composer require barryvdh/laravel-cors ap...
Vue axios的使用（解决laravel API跨域访问）
Hillbox
10-21 3324
一、安装 axios npm install --save axios 二、安装好后，在需要请求接口的页面： <script> import axios from "axios"; export default { mounted() { axios.get("http://lanyue.ink:8123/api/moments").then(res =>...
处理Laravel项目接口跨域请求问题
smallfishone的博客
03-20 1200
跨域是指从一个域名的网页去请求另一个域名的资源。比如从www.baidu.com 页面去请求 www.google.com 的资源。跨域的严格一点的定义是：只要 协议，域名，端口有任何一个的不同，就被当作是跨域。
使用Laravel框架编写接口
2301_78342702的博客
06-18 1128
Laravel有自己的模板文件，但其缺点便是复用性不强，例如，当你写一个页面时，其某些功能与另一个相似，但你必须在重建一个控制器来进行编写数据，而写成接口形式其可在其他页面重复调用这个接口也可以前后端分离。写接口前需要先将csrf的中间件进行注释掉，若不注释，当你发起post请求时，会请求错误，因为你没有携带csrf给中间件进行验证。2. 解决跨域问题：因为浏览器的同源策略的关系，在其他页面会遇到阻止跨域的问题。3.在终端执行创建一个Admin模型，在模型中编写允许操作的表名和允许写入的字段。
ajax跨域，以及在laravel中实现跨域
beyond__devil的博客
09-22 1839
今天有个朋友问到了laravel中ajax的跨域问题，之前看过不少，不过项目中从来没用过，基本都忘记了... 为了解决问题，找了找资料，百度上到处是，这里记录2篇，感觉还不错： http://www.cnblogs.com/dojo-lzz/p/4265637.html http://blog.csdn.net/leedaning/article/details/53787008 这里罗列出
vue3+vite+ axios 跨域代理后看不到接口错误
05-01
vue3是一个流行的前端框架，vite是一个快速的构建工具，而axios是一个常用的HTTP客户端库。在使用这些工具的时候，我们有时会遇到跨域问题，需要使用代理来解决。但是使用代理后，如果接口出现了错误，vue的开发者...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

MAO0209

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值