关于Vite项目本地ip地址访问post接口403的错误

起因

在开发中一直使用的是http://localhost:5173/进行的访问,一直也没有问题,直到有一天同事想看一下效果然后就把本地的ip地址给他了http://192.168.x.x:5173/,结果告诉我不行,get接口正常请求但是post接口报403,于是我在本地试了一下也是不行,那这是为什么呢?

过程

vite中配置代码如下

server: {
    port: 5173,
    proxy: {
        "/api": {
            target: env.VITE_BASE_SERVICE,
            changeOrigin: true,
            rewrite: (path) => path.replace(/^\/api/, "/"),
        },
    },
 },

在网上找了很多解决方案,最终生效的为下面的版本

server: {
   port: 5173,
   proxy: {
       "/api": {
           target: env.VITE_BASE_SERVICE,
           changeOrigin: true,
           rewrite: (path) => path.replace(/^\/api/, "/"),
           // 添加以下配置
           headers: {
                   Origin: env.VITE_BASE_SERVICE, // 设置Origin头
           },
       },
   },
},

至于是为什么,还是源于CORS的问题

• 对于 POST 请求，如果它的 Content-Type 不是 application/x-www-form-urlencoded、multipart/form-data 或 text/plain（比如 application/json），浏览器会先发送一个 ​​OPTIONS 预检请求（Preflight）​​，检查服务器是否允许跨域。
• 如果服务器没有正确响应 Access-Control-Allow-Origin，浏览器会阻止 POST 请求，返回 ​​403​​。

至于为什么changeOrigin: true,没有生效,可以参考下这篇文章,大致是changeOrigin配置只修改了host header没有修改origin header,所以如果后端没有处理跨域的问题,那就需要手动设置一下origin header

结尾

除了设置headers之外,还有一种删除origin header的方式也是可以的

server: {
    port: 5173,
    proxy: {
        "/api": {
            target: env.VITE_BASE_SERVICE,
            changeOrigin: true,
            rewrite: (path) => path.replace(/^\/api/, "/"),
            configure: (proxy, options) => {
                proxy.on('proxyReq', (proxyReq) => {
                        proxyReq.removeHeader('Origin')
                })
            },
        },
    },
},

这样也是可以的