vue + axios发送post请求，403错误的解决

最新推荐文章于 2024-06-13 11:18:21 发布
最新推荐文章于 2024-06-13 11:18:21 发布
阅读量2.2w 收藏 8
点赞数 5
分类专栏： vue

端是vue2.0，网络请求用的是axios，后端是springboot2.0

用axios向后端发送post请求，结果得到一个403无权限的错误，莫名其妙啊，我明明发送的是post请，但在chrome的调试里看到的却是options。
这里写图片描述
这里写图片描述
这里写图片描述
解释的链接地址：https://segmentfault.com/q/1010000008292792

到这里，只要在后端设置options响应支持即可。
这里写图片描述

感谢分享https://www.jianshu.com/p/2e93f14e1807

小仙女de成长
关注
  • 5
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【VUE】调用接口时报403 Forbidden
weixin_44404948的博客
12-08 4847
代理配置问题，改了代理监听路径，忘了改pathRewrite，pathRewrite应与上面监听名称保持一致。
已解决：axios 发送post请求，报403错误
weixin_43826370的博客
05-12 4980
axios 发送post请求，报403错误！！！
vue3delete请求报403forbidden,前后端解决方式,cookie无效问题
最新发布
weixin_42738354的博客
06-13 662
在做开发时，前期已经在Controller类加上，发送get和post请求都没问题，但遇到delete请求时，又报出跨域问题。
Vue发送ajax post请求，变为options请求，并返回错误代码403的解决方案
疯狂的蜗牛
02-28 1万+
问题描述： 采用vue发送ajax请求 var vm = new Vue({ el:"#myModal", data:{ moduleName:"", moduleIp:"" }, methods:{ addModule:function () { console.log("add"); $.ajax({ url...
vue请求网络接口中图片报错403解决办法
Tonyhnv的博客
07-02 4409
网络接口都是有请求限制的，特别是图片字段值是绝对路径的情况，请求的时候就会报错403 forbidden。这个时候应该使用缓存的方式拿到请求图片的地址进行缓存，只要在请求到的图片链接前面加上即可（）.........
部署vue项目到服务器时访问出现403权限不足
Zwwxd666的博客
04-18 1229
部署vue项目到服务器时访问出现403错误
关于vue使用axios post发送json数据跨域请求403的解决方法
热门推荐
春虫虫丶丶丶的博客
08-17 10万+
最近使用vue框架开发项目的时候， 遇到了一个问题，其实这个问题在之前就已经遇到过，不过因为当时没有时间，所以采用了另外一种方法解决。今天再次遇到这个问题，就铁了心解决，在网上找到很多资料，经过尝试都没有能够很好解决，经过自己的一番折腾终于将这个问题解决。 原文已更新，请耐心往下看哦！ 1. 问题 vue开发的时候，使用axios跨域发送请求，同时post发送的数据格式是json格式，发送出...
vue+axios全局添加请求头和参数操作
10-15
另外，对于POST请求，通常需要设置请求头`Content-Type`为`application/json`，以表明数据格式。axios默认使用`application/x-www-form-urlencoded`，但可以通过覆盖`transformRequest`来改变这个行为，如下所示： ...
结合Vue+axios+SpringBoot开发的用户管理系统
12-15
在这个用户管理系统中，axios负责与SpringBoot后端进行数据交互，如发送GET请求获取用户列表、POST请求新增用户、PUT请求更新用户信息以及DELETE请求删除用户等。axios具有良好的错误处理机制，可以方便地处理网络...
详解Vue用axios发送post请求自动set cookie
12-09
vue-resource不再维护之后，我也用起了axios，但是死活无法设置服务器发送过来的cookie 后来查询文档发现，这个是要单独配置的。 // `withCredentials` indicates whether or not cross-site Access-Control ...
vue+axios实现post文件下载
12-13
本文实例为大家分享了vue+axios实现post...第二步：修改axios请求的responseType为blob，以post请求为例： axios({ method: 'post', url: 'api/user/', data: { firstName: 'Fred', lastName: 'Flintstone' },
vue播放视频，一直显示403，看简单粗暴的解决方法
攻城狮很忙的博客
07-15 3204
接了一个需求是，需要视频播放，如果直接在网上找的视频，是可以直接使用的，但是调了接口，后端返回的视频地址是没问题的，但是控制台就是老报403的错误 后来直接在html里面加一个meta就解决了 <meta name="referrer" content="never"> 在某些情况网站想要控制页面发送给服务器的 referer 信息时，可以使用 referer metadata 参数。 referer 的 metadata 属性可以设置 content 属性值为以下： never origin
axios发送post跨域请求出现403解决办法
Vip_Van_Winkle的博客
05-23 1481
axios发送post跨域请求出现403解决办法 在controller层接收的请求参数前加上@RequestBody，重启tomcat后解决。
axios post请求常见格式
lishuaihao的博客
09-30 2542
这里要补充一下axios发送post请求时的注意点，axios post方法默认使用application/json格式编码数据，如果后端要求application/x-www-form-urlencoded那么直接发起请求获取数据，应该再添加额外的东西。 如下：当使用axios发起请求时，默认的采用的为application/json 后台代码如下： 如果要发送application/x-www-form-urlencoded时，可以使用 在使用node的express接收前台的post参数的时候，
vue前端跨域请求出现403错误解决方案
qq_23027247的博客
07-24 2万+
附上详细的讲解链接https://www.jianshu.com/p/a65c7abcb59e
解决axios跨域请求出错的问题状态码403错误
年华
01-26 6万+
错误信息： Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not
vue 部分网络图片加载失败，控制台报错，http状态码403
c327127960的博客
02-09 2801
vue 部分网络图片加载失败，控制台报错，http状态码403
axios中POST请求变成OPTIONS处理
weixin_34216196的博客
07-19 5372
今天在调接口的时候，发现在axios Post的方式提交formData格式的数据的时候出现了请求变成opition的情况，导致无法请求成功。这把我给郁闷的啊，因为我用jQuery的$.ajax可以请求成功，没有任何问题，数据成功返回。于是我就去网上搜了一番，最后终于解决了！下面我来分析一下：错误情况 控制台请求方式变成了OPITIONS可是我明明写的是POST啊这是为啥呢？具体原因可以参考浅谈 ...
vue使用axios发送post请求
06-28
### 回答1： Vue使用axios发送post请求的方法如下： 1. 首先需要在项目中安装axios库，可以使用npm安装：npm install axios 2. 在需要发送请求的组件中导入axios，如：import axios from 'axios' 3. 使用axios.post()方法发送post请求，如： axios.post('/api/data', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); 4. 也可以使用 async/await语法来发送post请求: async submitData() { try { const res = await axios.post('/api/data', { firstName: 'Fred', lastName: 'Flintstone' }); console.log(res) } catch (error) { console.error(error); } } 注意: - 在发送请求时，需要将请求地址和请求数据传入axios.post()方法中。 - 还需要根据实际情况来配置请求头，设置请求超时等参数 - 如果是跨域请求还需要注意处理 ### 回答2： Vue 是前端框架，axios 是一个基于 Promise 的 HTTP 库，常用于发送 AJAX 请求。在 Vue 中使用 axios 发送 post 请求非常简单，主要分为三个部分： 1. 安装 axios 首先需要在项目中引入 axios，可以通过 npm 或者 CDN 的方式进行安装。使用 npm 安装的方式如下所示： ``` npm install axios --save ``` 2. 发送 post 请求 构造一个 axios 实例，配置请求相关的信息，然后使用该实例发送请求。以下代码是一个使用 axios 发送 post 请求的例子： ``` import axios from 'axios'; let axiosInstance = axios.create({ baseURL: 'http://example.com/api', timeout: 1000, headers: {'X-Custom-Header': 'foobar'} }); axiosInstance.post('/user', { firstName: 'foo', lastName: 'bar' }) .then(response => { console.log(response); }) .catch(error => { console.log(error); }); ``` 在该例子中，我们创建了一个名为 axiosInstance 的 axios 实例，设置了基本的配置信息，如请求 URL 前缀、请求超时时间以及请求头信息。然后通过实例的 post 方法发送 post 请求，参数中包含要发送的数据。请求成功后，将会输出响应数据，并被 catch 捕获的 error 对象包含了错误信息。 3. 处理响应 axios 的请求结果是一个 Promise 对象，因此可以像 Promise 一样使用 then 和 catch 处理响应结果。下面是一个处理响应的例子： ``` axiosInstance.post('/user', { firstName: 'foo', lastName: 'bar' }) .then(response => { console.log(response); if(response.data.code === '0') { // 假设每个成功的响应包含 code 属性，0 表示请求成功 this.$router.push('/successPage'); } else { this.$store.commit('setErrorMessage', response.data.msg); } }) .catch(error => { console.log(error); }); ``` 在该例子中，我们检查响应中的 code 属性，根据不同的值执行不同的操作。如果 code 为 0，说明请求成功，跳转到成功页面；否则将错误信息保存到 Vuex 状态管理中。如果出现错误，catch 将会捕获错误信息。 总之，使用 axios 发送 post 请求非常简单，只需要构造一个 axios 实例，设置需要的配置信息，然后通过实例的方法发送请求即可。在处理响应时，可以像处理 Promise 一样使用 then 和 catch 方法。 ### 回答3： Vue是现在非常流行的前端框架，而axios是一种比较流行的前端HTTP请求库。Vue + axios可以方便地请求后端API数据，并且使用这个组合可以非常轻松地发送POST请求。 在Vue中使用axios发送POST请求最简单的方法是将要发送的数据作为对象传递给axios的post方法。例如，以下是发送一个简单POST请求的代码： ``` axios.post('/api/login', { username: 'John', password: 'Doe' }) .then(response => { console.log(response); }) .catch(error => { console.log(error); }); ``` 在上面的代码中，我们使用axios.post方法来发送POST请求到API的/login端点。我们将要发送的数据作为一个对象传递给post方法。服务器在收到请求后会解析这个JSON并使用其中的数据。 在发送POST请求时，我们还可以添加一些其他的参数，例如headers，params等，这些参数可以在POST请求中传递额外的数据。例如，以下是发送带有headers和params的POST请求的代码： ``` axios.post('/api/login', { username: 'John', password: 'Doe' }, { headers: { 'Content-Type': 'application/json' }, params: { redirect: true } }) .then(response => { console.log(response); }) .catch(error => { console.log(error); }); ``` 在上面的代码中，我们添加了headers和params对象。headers对象指定了我们将要发送的内容类型是JSON格式，而params对象指定了一些附加的查询参数，如重定向。 总之，Vue和axios一起使用非常方便，它们提供了丰富的API和灵活性，让我们可以轻松地与后端API进行通信。发送POST请求只需要几行代码，就可以很容易地向服务器发送数据，并在成功和错误回调中处理响应。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值