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 头部字段才能处理该请求,那么删除该请求头部字段可能会导致请求失败或被拒绝。

猜你喜欢

转载自blog.csdn.net/m0_73334325/article/details/131254774