vue项目本地运行时，调用post接口出现403报错问题解决

最新推荐文章于 2025-09-08 10:36:57 发布
原创 最新推荐文章于 2025-09-08 10:36:57 发布 · 1.7k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #vue.js

在使用Vueproxy进行接口代理时，遇到GET请求正常但POST请求返回403的问题。文章提出了解决方案，即在`onProxyReq`函数中移除origin头，以允许跨域请求。通过修改代理配置，可以成功处理POST请求的权限问题。
微 光
关注
解决Vue调用springboot接口403跨域问题
12-11
最近在做一个前后端分离的项目, 前端用的是Vue后端使用的是springboot, 在项目整合的时候发现前端调用后端接口报错403跨域请求问题 前端跨域请求已解决, 那么问题就出在后端了, 找了一些资料找到了很多种方法, 这里说两个简单粗暴的. 注意：“@CrossOrigin“注解要求jdk1.8及以上版本, SpringMVC 4.2及以上版本 1. 在controller层上添加@Configuration注解, 如果没有效果请制定RequestMapping总的method类型在试一下.(此注解也可以加在方法上) 2. 上面的方法解决的是部分功能的跨域问题, 有的时候我们需要全局跨域,
vue项目调用post接口请求数据，接口报403错误
卑微牛马学习笔记
06-16 3412
vue项目调用post接口请求数据，接口报403错误
关于VUE项目打包后，使用nginx部署在linux平台访问403问题解决方案
qq_43302243的博客
09-08 264
针对vue项目打包后，使用nginx部署到linux平台，访问时出现403的解决方法
vue3框架实现前后端连接总是出现403错误
New_moon__的博客
03-19 1478
当您在Vue 3应用程序中运行时，如果出现类似 "Network: use --host to expose" 的消息，这通常表示您的开发服务器只监听了本地回环地址（localhost），而没有监听外部IP地址，这导致外部无法访问您的应用程序。这可能会导致无法与后端连接的问题。这将使开发服务器监听所有可用的网络接口，包括外部网络接口，从而允许外部IP地址访问您的应用程序。请注意，这种做法在开发阶段通常是可以接受的，但在生产环境中应该遵循更严格的安全措施，确保服务器仅监听必要的网络接口并且有必要的安全配置。
Vue axios Post请求 403 解决之道
zhujiangtaotaise的专栏
12-27 3371
刚开始请求的时候报 CORS 错误，通过前端项目配置后算是解决了，然后，又开始了新的报错 403。// // 设置js请求跨域解决try {// 获取 cookiereturn req;axios({'userName':"朱",",}),headers: {})
vue项目做proxy代理后仍旧是403
m0_50981596的博客
11-11 794
【代码】vue项目做proxy代理后仍旧是403。
前端vue项目本地调用post接口403报错
qq_36424312的博客
09-03 3142
前两天开发过程中，遇到一个403报错问题。 前一天还可以正常调用，第二天启动项目后发现大片接口403报错。开始排查问题： 1、查看线上环境发现接口调用正常。 2、是用postman调用相同接口，接口调用正常。 3、相同代码，在同事本地项目调用正常。 4、403时后台日志未收到任何报错。 5、报错的都是post接口。 6、重启电脑，仍然报403。 7、删除依赖包，在重新安装，仍然403。 8、删除项目，重新clone，还是403。 9、最近未更改电脑配置。 10、询问同事，无果。
笔记-vue axios post请求403
aliceyang2012的专栏
06-21 1174
一个开源代码，本地部署运行后表面看着没啥大问题，但是一番具体操作后发现有接口运行报错403，跨域的问题，里里外外调了是很久都无效。在pathRewrite同级的位置配置onProxyReq。几经折腾后，搜到了一篇文章，试了一下后妥了，mark下~2、postman测试post接口也没问题。3、前端跨域已设置，后端的也设置了。1、get请求的没问题。
解决vue请求接口第一次成功,第二次失败问题
10-14
在Vue.js应用中，有时会出现一个特殊的状况，即首次调用API接口时一切正常，但后续再次尝试调用同一接口时却出现失败。这个问题通常与HTTP请求的状态、数据的持久化、请求的类型（简单请求或非简单请求）以及跨域...
uniapp | vue2 | vue3 - 解决调用天地图功能服务时 http 网络请求报错 net::ERR ABORTED 503（Service Temporarily Unavailabl）
🏆 前端领域优质创作者
08-06 4248
vue，uni-app，天地图，请求报错，503，请求失败，map.tianditu，天地图503，天地图请求503，接口503错误怎么办，vue天地图，uniAPP天地图，获取定位接口服务器报错503，获取当前定位，定位功能，IP属地定位，天地图服务器报错，如何解决报错，net::ERRABORTED503（ServiceTemporarilyUnavailabl），GET，POST，服务暂时不可用，react天地图，一直等待吗，报错怎么办，定位报错，轨迹，经纬度，天地图服务器503，在vue2
vue等两个接口都返回结果再执行下一步的实例
10-14
在Vue的生命周期钩子函数`beforeRouteEnter`中，我们可以利用Promise.all来解决这个问题。Promise.all接受一个Promise对象的数组作为参数，当这个数组中的所有Promise都变为fulfilled（即resolve）状态时，Promise....
【尚品汇项目】在vue项目使用接口后续进行三级联动时报错404 bad request axios error
epsilonthefarmer的博客
09-06 709
【尚品汇项目】在vue项目使用接口后续进行三级联动时报错404 bad request axios error
跨域请求问题： Vue前端访问Java后端接口返回403 Forbidden（Referer策略为 strict-origin-when-cross-origin） 的可能原因及解决方案，按优先级整
爱的叹息的专栏
04-24 3998
跨域请求问题： Vue前端访问Java后端接口返回403 Forbidden（Referer策略为 strict-origin-when-cross-origin） 的可能原因及解决方案，按优先级整
vue请求网络图片403错误
天之城的博客
04-01 555
获取爬虫爬下来的数据后，在加载图片时报403错误。 解决：在index.html中的head中添加就可以了。
vue 后台传的img报403错误
weixin_30815427的博客
07-20 666
在index页面加上这个就行了<meta name="referrer" content="no-referrer" /> 转载于:https://www.cnblogs.com/yourName/p/9341963.html
可以直接访问nginx代理的后端，vue访问接口403
qq_43614242的博客
05-09 1272
会对前端带有referer的请求进行验证，会通过配置拦截请求，并返回403.针对这种情况，在校验规则里加上对应的ip就可以了。这个原因很多，这里仅记录其中一种。当nginx配置防盗链时,如下。
vue 图片显示问题 403报错
yunbabac的博客
09-14 1349
做项目时，遇到了一些图片显示问题 1，本地图片 src下assets文件下文件加载不出来 解决：使用require 2,网络图片，访问出现403 解决：在index.html文件中添加标签 <metaname="referrer"content="no-referrer"/> ...
vue + axios发送post请求，403错误的解决
热门推荐
有问题可关注公众号：前端研究院 后台输入问题回复
08-20 2万+
端是vue2.0，网络请求用的是axios，后端是springboot2.0 用axios向后端发送post请求，结果得到一个403无权限的错误，莫名其妙啊，我明明发送的是post请，但在chrome的调试里看到的却是options。 解释的链接地址：https://segmentfault.com/q/1010000008292792 到这里，只要在后端设置options响应支...
vue接口报错ERR_NETWORK但是直接调用能请求成功
最新发布
09-19
在Vue中接口报错 `ERR_NETWORK` 但直接调用却能请求成功，可能是由于跨域请求问题或者其他网络配置问题导致的。 跨域请求问题的出现主要是由于浏览器的同源策略（Same-Origin Policy）导致的。同源策略是一种安全机制，它限制了从一个源加载的文档或脚本与来自另一个源的资源进行交互。具体来说，当协议、域名、端口中的任意一个不相同时，浏览器会认为这是跨域请求，并默认阻止这种请求。跨域请求问题的原因包括协议不同（例如从 `http` 请求 `https`）、域名不同（例如从 `example.com` 请求 `api.example.com`）、端口不同（例如从 `localhost:8080` 请求 `localhost:3000`）。 解决跨域问题的常见方法如下： 1. **使用代理**：在开发环境中，可以在 `vue.config.js` 中配置代理。示例代码如下： ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://your-api-server.com', changeOrigin: true, pathRewrite: { '^/api': '' } } } } } ``` 在上述代码中，将以 `/api` 开头的请求代理到 `http://your-api-server.com`。 2. **服务器端配置 CORS**：在服务器端配置允许跨域请求。以 Node.js 和 Express 为例，代码如下： ```javascript const express = require('express'); const app = express(); app.use((req, res, next) => { res.setHeader('Access-Control-Allow-Origin', '*'); res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE'); res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization'); next(); }); // 其他路由和中间件 app.listen(3000, () => { console.log('Server is running on port 3000'); }); ``` 上述代码通过设置响应头来允许跨域请求。 此外，还需要检查是否存在证书问题。如果后台服务部署在了证书不安全的 IP 地址上，前端请求 IP 地址可能会被浏览器拦截。解决方法是将 IP 接口地址复制到浏览器地址栏访问一下，在高级中点击继续前往，以此跳过浏览器的安全策略限制。不过每次浏览器历史数据被清除，都需要重新进行此操作，否则请求仍会被拦截 [^2]。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值