记录解决报错--vue前后端分离，接口401(Unauthorized)

jacGJ2024-01-31 17:39

1.场景

前端访问不了后端接口。报错401。

2.解决步骤

①在页面console.log(111)查看走到代码的位置没有。（走到了，没问题）

②查看vue.config.js配置。这段配置就是vue访问api的url。（没问题）

java 复制代码

devServer: {
    port: 8011,//前端端口
    //代理，例如前端访问http://127.0.0.1:8011/xxx
    //实际访问后端接口http://VUE_APP_URL/xxx
    //如VUE_APP_URL=127.0.0.1:9000,实际访问就是http://127.0.0.1:9000/xxx
    proxy: {
      "/xxx": {//后端接口统一前缀
        target: process.env.VUE_APP_URL,//后端接口url
        changeOrigin: true,//允许跨域，改变ip和端口传给后端
        // pathRewrite: {
        //   "^/api": "",
        // },
      },
    },
  },

查看.env.development配置，VUE_APP_URL = 'http://127.0.0.1:9000'。（没问题）

③查看gateway实际访问接口，http://127.0.0.1:9000/xxx。（没问题）

④我接口认证的ip是192.168.101.29，vue前端页面访问的是http://localhost:8011，认证成功后，认证信息保留在192.168.101.29里面，所以localhost里面没有认证信息，所以认证完后访问接口还是401错误。于是，将vue前端页面访问ip改为局域网的http://192.168.101.29:8011。问题解决。