Why is it that vue and springboot are deployed separately on different ports of the same server, and vue cannot access the interface provided by springboot?

both front and back ends are on the same CVM.
vue is deployed on nginx, using port 80 and port 8081 on springboot. After the project starts, both vue and backend interfaces can be accessed on my local computer. Sending post requests under the vue path is also a way to get backend interfaces, but requests sent from vue cannot call the interface. The project has done cross-domain work in springboot. And there is a strange problem is that after I started the jar package of springboot locally, the foreground accessed the interface, which means that the background on the server does not work, and the front end accesses my local enabled service directly, but what I want to achieve is that both the front and back ends are running on the server. Has anyone ever encountered a similar situation, or is it my network or linux setting problem?

,config.js
login: function () {
      axios.post("http://127.0.0.1:8081/login",
        {"account": this.form.account, "password": this.form.password})
        .then(
          response => {
            if (response.status === 200) {
              sessionStorage.setItem("token", true)
              sessionStorage.setItem("user", response.data.username)
              if (response.data.msg === "success") {
                // this.$message.success(response.data.msg)
                this.$router.push("/manager")
              } else {
                this.$message.error(response.data.msg)
              }
            } else {
              this.$message.error(response.data.msg)
            }
          })
        .catch(
          response => {
            alert("fail")
          })
    }
Jul.07,2022

post the code of your vue configuration ajax request to


may be the cross-domain problem of js. SpringBoot has a solution to the cross-domain problem, just check it.


is there a firewall problem, port 8081 is not open


1, local development environment
in the configuration of the front-end project, set proxy to proxy the backend interface
vue project, you can refer to the following link: https://cli.vuejs.org/zh/conf...
2, server environment
you can use proxy to proxy in the nginx configuration

server {
    listen 80;
    ...
    location ^~ / {
        try_files $uri $uri/ @proxy;
    }
    
    location @proxy {
        proxy_pass    http://127.0.0.1:8081;
        proxy_set_header Host          $host;
        proxy_set_header X-Real-IP      $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      }
}

in this way, the front and rear ends can all be in the same domain and under the same port.


has been resolved, it is the problem of front-end interface configuration, the front-end configuration 127.0.0.1 will directly request my client to initiate access. I have done cross-domain processing in the background, so the frontend access to the backend is treated as a method configuration that is not on a server. 127.0.0.1 can be modified to the corresponding public network IP, and the simplest configuration used by nginx can be

.
Menu