为什么vue和springboot分离部署在同一台服务器不同端口,vue不能访问springboot提供的接口?

Question

前后端都是在同一台云服务器上
vue是部署在nginx上的,用的是80端口,springboot是用的8081端口,项目启动之后,vue跟后台的接口都能在我本地电脑访问,vue路径下发送post请求也是能获取后台的接口,但是从vue发送的请求就不能调用接口,项目是在springboot里做了跨域了,而且有个奇怪的问题是我本地把springboot的jar包启动之后前台就访问接口了,相当于服务器上的后台不起作用,前端直接访问我本地的开启的服务了,但我想实现的是前后端都放在服务器上运行,有没有人碰到过类似情况的,还是我网络或者linux设置的问题?

这个是登录的一个方法,我并没有在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')
          })
    }

Answer 1

已经解决,是前端接口配置的问题,前端配置127.0.0.1会直接请求我发起访问的客户机.我在后台做了跨域处理,所以前端访问后台我当成不在一台服务器上的方法配置,127.0.0.1修改成对应公网IP即可,nginx用的最简单配置即可

Answer 2

贴出你vue配置ajax请求的代码来

Answer 3

可能是js的跨域问题，SpringBoot有解决跨域问题的方案，查一下就行了。

Answer 4

是不是防火墙问题，没开8081端口

Answer 5

1、本地开发环境
在前端工程中配置中，设置proxy来代理后端接口
vue工程中，可以参考以下链接：https://cli.vuejs.org/zh/conf...
2、服务器环境
可以在nginx配置里面用proxy来代理

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;
      }
}

这样前后端，可以都在同一域、同一端口下。