vue项目调用post接口请求数据,接口报403错误

通过一番百度搜索,尝试了很多方法,最终找到了一个能解决我问题的答案,操作如下:

在vue.config.js文件中,配置跨域的选项中的target同级下新增一个配置项

 onProxyReq(proxyReq){
    proxyReq.removeHeader('origin')
 },

 来自某位大佬的解释:

在向代理服务器发送请求之前,先删除请求头中的 Origin 字段。

在使用跨域代理时,浏览器会自动添加 Origin 头部字段,指示请求的源地址。例如,如果您的网站为 www.example.com,而您向 api.example.net 这个域发出 Ajax 请求,那么浏览器会自动添加以下请求头:

Origin: www.example.com
这样的请求头就是用来表明请求的来源地址的,以便服务器做出正确的响应。在某些情况下,这样的请求头可能会导致问题,比如受到 CORS 限制或被防火墙拦截等。此时,您可以通过配置 onProxyReq 钩子函数来删除该请求头。

具体来说,onProxyReq 钩子函数是在请求被代理转发出去之前被调用的,它接收一个代表请求的 proxyReq 对象参数。因此,以上代码的作用就是在代理请求被发送出去之前,通过在 proxyReq 对象上调用 removeHeader() 方法,将请求头中的 Origin 字段删除掉,从而避免潜在的跨域问题。
删除请求头中的 Origin 字段并不能完全解决跨域问题,但可以规避某些 CORS 问题。

通常情况下,浏览器会对跨域请求进行安全限制,以防止来自不可信来源的数据被加载和执行。其中的一种限制机制就是 CORS(Cross-Origin Resource Sharing 跨源资源共享)。

CORS 机制要求服务器在响应中必须包含一些特定的头部字段,才能允许跨域请求。其中一个重要的头部字段就是 Access-Control-Allow-Origin,表示服务器允许哪些域名的请求访问资源。如果该头部字段的值与请求头中的 Origin 字段不匹配,浏览器就会默认拦截该请求,以保障数据的安全性。

当您使用代理方式发起跨域请求时,代理服务器会代替浏览器向目标服务端发送请求,并将响应返回给浏览器。因此,删除请求头中的 Origin 字段可以避免某些针对浏览器的跨域限制,使得代理请求更加顺利。但需要注意的是,如果被请求的目标服务器明确规定必须携带 Origin 头部字段才能处理该请求,那么删除该请求头部字段可能会导致请求失败或被拒绝。

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值