vue——设置proxy代理，status为403/504/返回code为401

参考：https://juejin.cn/post/7032114280967176199  vue proxy 设置接口代理后，get请求正常，post请求报403，解决方案

           https://www.cnblogs.com/sweeeper/p/11132455.html  说下vue工程中代理配置proxy

 

我的情况

vue3项目，使用proxy代理请求，但status一直为403

 

vue.config.js:

devServer: {
    proxy: {
      '/api': {
        target: 'xxx',
        changeOrigin: true,
        pathRewrite: { '^/api': '' },
      },
    },
  },

 

原因

在使用跨域代理时，浏览器会自动添加 Origin 头部字段，指示请求的源地址。

例如，如果您的网站为 http://locahost:8080，而您向 http://www.example.com 这个域发出 Ajax 请求，那么浏览器会自动添加以下请求头：
Origin: http://locahost:8080
这样的请求头就是用来表明请求的来源地址的，以便服务器做出正确的响应。在某些情况下，这样的请求头可能会导致问题，比如受到 CORS 限制或被防火墙拦截等。此时，您可以通过配置 onProxyReq 钩子函数来删除该请求头。

 

解决方法

devServer: {
    proxy: {
      '/api': {
        target: 'xxx',
        changeOrigin: true,
        pathRewrite: { '^/api': '' },
        onProxyReq: function (proxyReq) {
          proxyReq.removeHeader('origin'); // <== 关键
        },
      },
    },
  },

onProxyReq 钩子函数是在请求被代理转发出去之前被调用的，它接收一个代表请求的 proxyReq 对象参数。

因此，关键代码的作用就是：在代理请求被发送出去之前，通过在 proxyReq 对象上调用 removeHeader() 方法，将请求头中的 Origin 字段删除掉，从而避免潜在的跨域问题。

删除请求头中的 Origin 字段并不能完全解决跨域问题，但可以规避某些 CORS 问题。

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

CORS 机制要求服务器在响应中必须包含一些特定的头部字段，才能允许跨域请求。其中一个重要的头部字段就是 Access-Control-Allow-Origin，表示服务器允许哪些域名的请求访问资源。

如果该头部字段的值与请求头中的 Origin 字段不匹配，浏览器就会默认拦截该请求，以保障数据的安全性。

当您使用代理方式发起跨域请求时，代理服务器会代替浏览器向目标服务端发送请求，并将响应返回给浏览器。

因此，删除请求头中的 Origin 字段可以避免某些针对浏览器的跨域限制，使得代理请求更加顺利。但需要注意的是，如果被请求的目标服务器明确规定必须携带 Origin 头部字段才能处理该请求，那么删除该请求头部字段可能会导致请求失败或被拒绝。

 

504 Gateway Timeout问题

vu2项目，出现status为504 Gateway Timeout，是代理配置有误，原代码：

proxy: {
    '/api': 'http://xxx:8080/test'
},

像403一样处理即可

 

401问题

出现code为401，是因为我请求的地址有问题，需要代理的地址是：http://xxx/test，我请求地址写的：http://xxx/test/api，应该是：http://xxx/api，然后就会代理为http://xxx/test