将axios与Vue和Laravel一起用于post请求
，可以实现前端和后端之间的数据交互和通信。下面是完善且全面的答案：
- 概念：
- axios：axios是一个基于Promise的HTTP客户端，用于浏览器和Node.js环境中进行HTTP通信。它提供了简单易用的API，支持发送HTTP请求并处理响应数据。
- Vue：Vue是一套用于构建用户界面的渐进式JavaScript框架，提供了数据驱动的组件系统。它可以与其他库或已有项目进行逐渐的集成。
- Laravel：Laravel是一个流行的PHP Web开发框架，它提供了简洁、优雅的语法和丰富的功能，用于快速构建高质量的Web应用程序。
- 分类：
- axios属于前端开发领域的HTTP请求库。
- Vue是一个前端开发框架。
- Laravel是一个后端开发框架。
- 优势：
- axios：具有简单易用的API，支持Promise机制，可以在浏览器和Node.js环境中使用，提供了丰富的配置选项和拦截器，支持请求和响应的拦截和转换，具有良好的错误处理机制。
- Vue：具有轻量级、易上手的特点，采用了虚拟DOM和响应式数据绑定，提供了一套完整的构建用户界面的解决方案，可以高效地管理和更新界面状态。
- Laravel：具有优雅的语法和丰富的功能，提供了一套完整的Web开发解决方案，具备高性能、可扩展和安全性。
- 应用场景：
- axios：适用于各种前端项目，包括Web应用、移动应用和桌面应用，用于与后端API进行数据交互。
- Vue：适用于构建单页面应用（SPA）和复杂的前端界面，可以与各种第三方库或框架进行整合。
- Laravel：适用于构建高性能、可扩展的Web应用程序，提供了一套完整的后端开发解决方案。
- 推荐的腾讯云相关产品：
- 腾讯云API网关：提供安全稳定的API调用服务，可用于前后端的接口管理和发布。
- 腾讯云Serverless Cloud Function：以函数为单位的无服务器计算服务，可用于构建云原生应用的后端逻辑。
- 相关产品介绍链接地址：
- axios官方文档：https://github.com/axios/axios
- Vue官方文档：https://vuejs.org/
- Laravel官方文档：https://laravel.com/docs
- 腾讯云API网关产品介绍：https://cloud.tencent.com/product/apigateway
- 腾讯云Serverless Cloud Function产品介绍：https://cloud.tencent.com/product/scf
相关·内容
我的控制器中有以下内容
class WrittersController extends Controller
{
public function index()
{
return view('backend.writters.dashboard');
}
public function store(Request $request){
//confused on when to use this
}
public function create(Request $request){
//add new user functional
浏览 0提问于2017-10-24得票数 1
当我向索引控制器发出get请求时，我遇到了一个问题，我的想法是，当我发送到索引控制器时，它只返回bible_id等于请求的“comentario”。 路由： Route::resource('/comentarios', 'ComentariosController', ['except' => ['store']]);
Route::post('/comentarios ', 'ComentariosController@index');
Route::post('/newCome
浏览 12提问于2020-06-24得票数 0
我使用Laravel5.5创建了一个api，并在邮递员中进行了测试。所以，在“邮递员”中，它是正确工作的，但是当我试图从我的前端连接它时，我会发现一些错误。我在前端使用Vue.js。
这里是前端使用axios的请求：
<script>
import axios from 'axios';
export default {
data () {
return {
posts: {}
}
},
created() {
axios({
method: 'get&#
浏览 0提问于2018-02-01得票数 1
回答已采纳
我对VueJS有点陌生，我想从Laravel (护照) API中获取数据，因此我使用npm i axios处理API请求，这是来自App.vue文件的脚本代码：
import axios from 'axios';
export default {
data () {
return {
}
},
created() {
const postData = {
grant_type: "password",
client_id: 2,
client_secret: 'MvEyvm3MMr
浏览 2提问于2019-06-07得票数 0
我在put方法中遇到一个错误
我使用axios作为post和fetch用于put。我不知道put方法如何在axios上工作，所以如果有人能帮忙，我会很感激的。
Component.vue脚本
editItem (item) {
this.dialog = true
this.editedIndex = this.departments.indexOf(item)
this.id = item.id;
this.department = item.department_name;
},
save() {
c
浏览 4提问于2019-12-15得票数 0
回答已采纳
我在尝试把vue-auth安装到我的laravel-vue应用程序中。但我得到的控制台错误
错误(@websanova/vue-auth)：驱动程序/ http /axos.js:尚未设置http插件。未定义的TypeError: this.plugins.http未定义
这是我的app.js文件内容
import 'core-js/stable'
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import Vue
浏览 9提问于2021-09-24得票数 0
我有个问题，在任何地方都找不到答案。我正在用PHP(Laravel)的后端和前端的VueJs编写一个应用程序。我已经成功地完成了整个应用程序，没有什么问题，但现在，我必须同时保存和更新一个表，我将解释如下代码。
场景更新
我正在写一个维护控制，我必须在一个表中输入维护记录，所以有些维护是定期生成的，我应该在下一次维护开始时发出警告，这就是我需要同时发布和放置的原因。我不能从vue发送一个请求到laravel，因为我使用的是路由，如果它与POST方法一起使用，则得到不允许的错误，正如您在控制器的函数中看到的那样，我已经尝试使用一个请求。
下面是我在主vue文件中使用的路由：
<b-tab
浏览 0提问于2019-09-26得票数 1
回答已采纳
我目前正在创建一个网站与拉拉，我创建了一个评论系统与vue。我成功地发布了评论，但我在编辑和删除特定评论时遇到了问题。我试图以某种方式检索每个注释的id，这样我就可以创建一个类似于下面图片中的postComment()的方法来删除或编辑特定的注释。有人知道怎么做吗？提前感谢
这是我的贴子页，上面有我的帖子和附加的评论
<script>
const app = new Vue({
el:'#root',
data: {
comments: {},
commentBox: '',
浏览 3提问于2019-12-09得票数 0
我在做一家拉拉伏伊士水疗中心。我试着从管理员那里更新一个帖子。我在创建一个使用和axios请求发送的新FromData时发送表单数据。
但是控制器给我发了一个错误：
message: "The given data was invalid."
errors: {name: ["The name field is required."], description: ["The description field is required."]}
，这里是post/edit.vue. the
<template>
<div cl
浏览 2提问于2020-09-17得票数 0
回答已采纳
我正在使用Laravel5.6，Vue.js，Socket.IO
下面的是我使用Socket.IO发送实时消息的代码
var url = "http://localhost:6001/apps/My_App_ID/events?auth_key=My_Key";
axios.post(url,
JSON.stringify(request))
.then((response) => {
//Message Sent
});
问:使用Socket.IO是否安全，因为它是客户端的。任何人都能看到这个信息。
我使用Pusher，因为它很昂贵，所
浏览 0提问于2018-02-22得票数 0
1回答
我得到的'unauthorized' 错误时，试图发布一个新的评论与axios .在console.log(this.user.api_token);方法中，我在axios.post之前添加了( postComment() )。输出是："undefined"！我正在学习，我对api不太了解。但是我不认为用户api_token是要手动设置的，对吗？
剧本：
<script>
const app = new Vue({
el: '#app',
data: {
comments: {},
commentBox: &
浏览 0提问于2018-05-01得票数 0
回答已采纳
我正在使用Spotify API与Vue合作一个项目，但在尝试获取访问令牌时遇到了困难。我使用axios发出请求，但每次我从服务器获得400状态时。
这就是我这样做的方式，我在我的Vuex商店的一个动作中有一个请求，我不确定我是否遗漏了什么。
axios({
method: 'post',
url: 'https://accounts.spotify.com/api/token',
params: {
grant_type: 'authorization_code',
浏览 10提问于2020-05-25得票数 1
2回答
我将Laravel与Vuejs和AXIOS一起用于HTTP请求。我正在发送带有对象数组的post请求。那么，在我的laravel存储功能中，如何从$request中检索数据呢？
我的问题数组看起来如下：
data:{
questions:[{
question:'',
opt1:''
},
{
q
浏览 0提问于2018-03-11得票数 1
回答已采纳
我正在使用Laravel开发一个Vue应用程序，并且我得到了它在标题中所写的内容。
我的Axios电话：return await axios.post("/customers/load-cart-data", payload);
在“我的网络”选项卡的常规部分中：Request Method: POST
我从api中得到的信息："message": "The GET method is not supported for this route. Supported methods: POST."
我甚至在拦截器中注销了req，上面写着：....,
浏览 5提问于2021-08-09得票数 0
回答已采纳
我创建了一个vue和Laravel使用Sanctum，发送请求使用axios，但我得到状态204，当我试图获取用户信息，我得到了Unauthenticated，我不知道什么是错的!！
这是我的api.php
Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
return $request->user();
});
home.vue
<script>
import axios from "axios";
axio
浏览 0提问于2020-07-04得票数 0
回答已采纳
如何为Vue应用程序设置跨域配置？我有一个Laravel在一个不同的领域服务。因此，当我试图发送和API请求时，它不是将它发送到正确的API目的地，而是发送到自己的域(例如，vue在devport.findosman.xyz上服务&我试图在api.devport.findosman.xyz/api/login访问API，但发送到devport.findosman.xyz/login)。注意，我正在使用axios，如下所示
API.js
import axios from "axios";
const injectAccessToken = (config) =>
浏览 1提问于2021-04-15得票数 0
--这是我的 app.js 文件，其中的响应显示在控制台上，但它提供了错误。我不知道为什么
require('./bootstrap');
window.Vue = require('vue');
Vue.component('posts', require('./components/posts.vue'));
const app = new Vue({
el: '#app',
data:{
blog:{},
},
mounted(){
axi
浏览 5提问于2017-10-19得票数 0
回答已采纳
我一直在努力在同一台服务器上使用Laravel后端实现一个完整的Vue前端。使用axios可以很好地完成正常的资源请求；但是，登录和注销有点像噩梦！我已经用尽了我的想法，真的需要一些帮助:) 这是我的Login Vue组件： <div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
浏览 15提问于2019-06-14得票数 2
我尝试使用vue js + axios在Django中创建对象，但有些情况下这对我不起作用。我尝试了两种方法，我总是在vue dev工具中看到空数据。当我在vuedev工具中填充数据模型时，我看到"Invalid value“必须是一个有效的Json"”。
第一种方法。我创建了一个返回jsonresponse视图。
@login_required
def save_embed(request):
if request.method == "POST":
form = SubmitEmbed(request.POST)
if form.is_va
浏览 0提问于2020-06-15得票数 0
我正在使用vue和laravel.but，我的保存函数不起作用。所以我尝试转储和消亡request对象，但在预览中看不到request对象。为空。
protected function save()
{
$request = Request::all();
dd($request);
$suggestion = new Suggestion();
$suggestion->connection_id = $request['connection_id'];
$suggestion->company_id = $request[
浏览 29提问于2019-10-31得票数 1
回答已采纳
在我的laravel和vue.js电子商务项目中，我正在使用laravel护照进行认证。
成功登录后，我希望将用户重定向到他/她的仪表板。
这是vue仪表板页面：
<template>
<div class="content-center">
<h1>Dashboard my account</h1>
<p>
{{userData.name}}
</p>
</div>
</template>
<script>
import
浏览 8提问于2021-08-28得票数 0
1回答
我想用axios定制我的get、post、put函数。在执行axios.create()操作之后，当我执行get操作时，我希望它每次都在那里执行然后和catch操作。
import axios from "axios";
export default (apiName = "") => {
let headers = {
"Content-Type": "application/json"
};
let token = JSON.parse(localStorage.getItem
浏览 3提问于2022-05-12得票数 0
1回答
我有laravel-vue应用程序，我的一个函数是根据post请求运行的，但奇怪的是，我得到了GET请求错误：
此路由不支持GET方法。支持方法: POST。
代码
Route
Route::post('distanceCost', 'Api\Front\CartController@distanceCost');
Component
sendShippingRequest() {
// post request
axios.post('/api/distanceCost/', this.form, {
head
浏览 3提问于2020-08-07得票数 0
我目前正在重构一些旧代码。我想获取vue表单的数据，以便通过laravel的api将其发布到我的数据库中。看看我得到的json输出&控制器方法，在我看来，一切都很好。我还试图将路由：：post代码移动到常规的web.php，但没有成功。
我将发布我的模式的屏幕截图&确切的错误消息(xhr取消了)。
Route::middleware('auth:api')->get('/user', function (Request $request) {
return $request->user();
});
Route
浏览 1提问于2019-10-23得票数 0
我用的是雨燕5.8和vue js。我为post/get请求创建了一个通用函数。问题是，我没有得到混合函数的响应。这是我的代码：
TestComponent.vue
import GeneralMixin from '../mixins.js';
export default {
mixins: [ GeneralMixin ],
methods:{
login: function (e) {
let response;
response = this.testMixin();
浏览 1提问于2019-05-30得票数 0
我有一个python应用程序和vue-js应用程序在minikube。我试图通过在URL中提到" python - app - service“来发布到python应用程序服务，但vue js仍然将其作为文字"python-app-service”应用，而不是IP地址。
假设这是我的名为python-server：spec: containers: - image: python-server:latest imagePullPolicy: IfNotPresent name: python-servier ports: - co
浏览 2提问于2018-11-09得票数 1
如果有带有文本字段和文件上载选项的窗体。该文件名为start.vue(例如)。由此调用一个module.js(例如)文件。使用该service.js(例如)被调用。service.js在moveController.java中调用api (比方说)。我收到错误的原因是:当前请求不是多部分请求。
试图找到语法，以便在调用api之前保留多部分标头。module.js正在获取适当的文件值。但对service.js一无所知
start.vue是：
<script src="https://unpkg.com/axios/dist/axios.min.js"></scr
浏览 1提问于2019-06-10得票数 1
回答已采纳
2回答
我有一个vue.js SPA应用程序。我的目标是在令牌过期时通过axios拦截器刷新令牌。当用户向api发送请求时，首先需要检查token过期时间，如果过期，则刷新，然后完成用户的请求。
我得到了一个刷新函数：
const refreshToken = () => {
return new Promise((resolve, reject) => {
return axios.post('/api/auth/token/refresh/').then((response) => {
resolve(response)
}).ca
浏览 0提问于2019-01-20得票数 4
4回答
在我的Laravel中，从Vue获取HTTP数据非常困难。
我所拥有的非常简单。
axios({
method: 'post',
url: 'http://localhost:8888/api/vue-data',
data: { firstName: "Dally" },
config: { headers: { 'Content-Type': 'multipart/form-data' }}
})
.then(response => {
浏览 1提问于2018-08-22得票数 0
回答已采纳
1回答
概念：我有一个允许用户发布问题的应用程序.当用户单击Ask按钮时，我尝试使用Vue.js和Axios提交问题。
问题： 70%的问题正确提交，但30%的问题失败并返回“未能加载资源:服务器响应状态为419 (未知状态)”。
我的Vue组件
<template>
<div id = "main_question_box" class = "tab-pane fade">
<div class="panel-body posting-field-box">
浏览 3提问于2017-11-20得票数 7
我在我的Vue项目中使用axios，其中一个对我的应用编程接口的调用涉及POST。我的posts和set都要求用我的令牌设置Authorization头。所有的get请求都工作得很好，但是在axios.post中放入完全相同的头会导致403。
下面是我的axios代码：
axios.post('https://my.example.org/myapi/meta?uname=' + uname + '&umetaid=' + post.umeta_id + '&umetavalue=' + post.meta_value, {
浏览 11提问于2017-08-24得票数 5
回答已采纳
我正在尝试从一个带有axios的Vue.js应用程序对NET CORE 5服务(托管在IIS10上)发出POST请求。 当我用POSTMAN测试这项服务时，它工作得很好，但在Axios上，我总是收到来自服务器的405。 使用fiddler分析请求看起来非常不同。在axios请求中，缺少content-type头，方法是OPTIONS而不是POST。 这是邮递员的请求： POST https://localhost/apiluxor/api/SignIn HTTP/1.1
Content-Type: application/json
User-Agent: PostmanRuntime/7.2
浏览 98提问于2021-10-27得票数 0
回答已采纳
1回答
我有点搞不懂vue.config.js中的vue.config.js是做什么的。当我从前端表单执行axios请求时，我知道它是在我的http-common.js和tutorial_data_services.js文件中处理的。
我正在努力学习和理解这一点。有人能帮上忙吗？
vue.config.js
const path = require('path');
module.exports = {
outputDir: path.resolve(__dirname, '../server/public'),
devServer:{
浏览 1提问于2020-03-27得票数 2
回答已采纳
1回答
我用Axios创建了一个Vue应用程序。我通过Vue UI依赖项安装了Axios。在我的main.js文件中添加了一个全局配置。
import Vue from "vue";
import "./plugins/vuetify";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import axios from "axios";
Vue.config.producti
浏览 0提问于2019-03-13得票数 3
回答已采纳
我使用vue和axios创建了laravel cms。 我想获取发送post请求的当前用户 因此，我遵循了laravel api文档，并采用了这个结构 // bootstrap.js
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
window.axios.defaults.headers.common['Authorization'] = `Bearer
浏览 26提问于2021-04-26得票数 1
2回答
我目前正在构建一个类似Twitter的应用程序，作为Vue.js的编码培训，并且一直被错误的POST 404 Not Found所困。
当我尝试发布一个新的tweet时，这个错误就会发生，而“显示之前的tweet”函数可以工作。我使用axios post来“发布新的tweet”，使用axios get表示“显示前面的tweet”。对于post和get，我都使用相同的地址get。
这意味着地址本身是正确的，就在几分钟前，我还了解到POST的错误很可能是因为我没有为POST创建端点。
现在又出现了另一个问题。即使在谷歌上搜索了一些有用的具体示例之后，我也不清楚“创建端点”在我的脑海中是怎样的。
因
浏览 0提问于2019-08-08得票数 2
回答已采纳
我试图使用axios从我的vue应用程序发送一个post请求。我以前从laravel中捕获了一个csrf令牌，然后在请求中发送这个csrf令牌。Laravel带着419返回，尽管我的飞行前选项请求返回204。
这是我的请求代码：
export default axios => ({
csrfToken: null,
login (email, password) {
this.callFunc(function () {
axios.post('http://localhost:6080/auth', {
email: ema
浏览 7提问于2022-04-13得票数 0
1回答
我有一张分贝的体育赛事表。每个事件都有一个年份、事件名称和一个事件获胜者。
我对这个表的管理视图允许将事件按年分组并大量插入(通常一次插入8行体育赛事)。我有一个表，用Vue编写，它允许将多达8行的体育赛事添加到界面中，填充和提交字段。这个效果很好。
这个方法是
public function storeMultiple(Request $request)
{
$year = $request->year;
$newEvents = $request->events;
foreach ($newEvents as $key
浏览 4提问于2017-08-11得票数 0
回答已采纳
我有一个方法可以在单击按钮时调用登录终结点 login() {
let email = this.user.email
let password = this.user.password
axios.post('invalidRoute').then( (response) =>{
console.log('success')
console.log(response.data)
浏览 20提问于2019-02-05得票数 0
1回答
我做了一个小的社交网络，我需要当跟踪一个用户的朋友名单是更新，后端的拉拉和前端的vuejs。
单击“跟随”用户更新可能的朋友列表，并更新另一个组件中的朋友列表。
叶片
<div class="col-md-2"><amigos></amigos></div>
<div class="col-md-8"><post-list></post-list></div>
<div class="col-md-2"><no-amigos>&
浏览 1提问于2017-08-15得票数 1
回答已采纳
我在我的存储操作中使用了Axios，并希望基于某种状态设置Axios标头(以更改接受语言的请求标头)。当尝试访问导出外部的存储时，我得到一个错误“无法找到未定义的属性状态”。我的store/index.js文件： import Vue from "vue";
import Vuex, { Store } from "vuex";
import Axios from "axios";
Vue.use(Vuex);
Axios.defaults.headers['Accept-Language'] = store.state.La
浏览 25提问于2021-07-09得票数 2
回答已采纳
我有一个问题，从Vue axios发送POST请求到带有sanctum的laravel服务器。 首先，我得到了token。 我的api.php路线 Route::post('/get_token', function (Request $request) {
$request->validate([
'email' => 'required|email',
'password' => 'required',
'device_name
浏览 72提问于2020-05-03得票数 1
回答已采纳
我有一个小的前端和后端分离的项目与开发环境和生产环境，所以我想设置代理调用api。vue/cli版本为4.6.5。
文件结构：
src
axios
api.js
request.js
components
home
LastBlogs.vue
.env.development
.env.production
package.json
vue.config.js
.env.development：
NODE_ENV = 'development'
VUE_APP_BASE_API = '/dev-api'
浏览 4提问于2020-10-08得票数 0
回答已采纳
我正在后台使用Axios / Vue JS和Laravel 9，我试图上传一个文件，但是我收到了一个错误，这是我的代码：
selectedFile: function(){
let form = document.getElementById('myform');
let data = new FormData(form);
data = data.append('file', document.querySelector(".dropzoneFile").files[0]);
axios.post(
浏览 25提问于2022-07-04得票数 0
回答已采纳
2回答
我面临着一个问题，但我不知道它在哪里，为什么。我有一个基于express4(nodejs)的后端应用程序接口，我们已经用passport实现了身份验证。
当我使用邮递员时，我在/login上使用post登录。它存储会话cookie，且由于cookie未过期，所有路由现在都是可访问。
但是我的前端基于VueJS。我使用Axios来完成请求。这个请求看起来不错。但是任何cookie都会被存储，所以浏览器会在登录页面上进行回送。
我尝试过没有身份验证检查，或者不是相同的。但在邮递员身上这是可行的。
Vue的main.js：
import Vue from 'vue'
import V
浏览 0提问于2017-02-14得票数 3
回答已采纳
我试图通过AWS网关创建一个API测试函数，并通过一个带有Axios的Vue应用程序调用Lambda函数。它应该从输入元素发送一个名称和电子邮件。每次我收到这个错误：
Access to XMLHttpRequest at '[API Gateway URL]' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not ha
浏览 4提问于2020-12-21得票数 1
我一直在学习关于Vue + Laravel身份验证的教程，所有内容都已经设置好了，但是接下来的教程介绍了如何在本地存储令牌。我已经读到，这不是应该遵循的最佳实践，因为它更容易受到XSS攻击。
问题是很难找到关于在cookie (特别是Laravel + Vue)中存储令牌的教程。有谁能帮助我们如何在cookie中实现令牌的存储？
非常感谢你能帮忙的人。
这是我目前的密码。
控制器
public function login(Request $request)
{
$http = new\GuzzleHttp\Client;
try {
$response =
浏览 1提问于2020-01-03得票数 3
回答已采纳
我想使用Vue Auth、Axios和Cakephp进行身份验证，但我有一个众所周知的错误：
Access to XMLHttpRequest at 'http://dev.zenburo.actuelburo.local:8081/api/users/token' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resou
浏览 0提问于2019-11-23得票数 1
我跑过了
php artisan serve
我的laravel应用程序在localhost上成功解析:8000
Laravel Sanctum配置
SESSION_DRIVER=cookie
SESSION_DOMAIN=localhost
SANCTUM_STATEFUL_DOMAINS=localhost:8080
我的vue应用程序已在localhost上解析:8080
async loginUser() {
try {
await this.$axios.get('/csrf-cookie');
await this.$axios.p
浏览 9提问于2021-06-11得票数 0
vue版本是vue3。axios版本是0.24.0。当我使用此方法启用HTTPS时，它会通知我证书无效。 const axios = require('axios')
const fs = require('fs')
const https = require('https')
import { Notify } from 'quasar';
const httpsAgent = new https.Agent({
ca: fs.readFileSync('x
浏览 778提问于2021-11-02得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
