nginx怎么反向代理到本地地址

我在阿里云服务器上部署了前后端分离项目，前段使用nginx部署vue项目，后端使用springboot开发。为什么在前端运行的时候获取不到后端的数据

跨域报错吗？
vue里面

 proxyTable: {
      // 配置多个代理
      "/api": {
        target: "http://localhost:8081",
        secure:true,
        changeOrigin: true,
        pathRewrite: {
          // 路径重写，
          "^/api": "" // 替换target中的请求地址
        }
      },
    },

nginx里面

    server {
        listen       8101;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
             root  html/dist;
             index index.html index.htm;
             try_files $uri /index.html; # 解决刷新404问题
             client_max_body_size 1024M;
             proxy_set_header Host $host;
             proxy_set_header X-Real-IP $remote_addr;
             proxy_set_header REMOTE-HOST $remote_addr;
             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
        
        location ~/api {
            #rewrite ^/api/(.*)$ /$1 break;
            proxy_pass http://127.0.0.1:81; #接口地址
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            alias   html;
        }


    }

8081指的是你前端vue系统的端口号，http://127.0.0.1:81指的是你的后台接口地址

域名访问报错信息是什么样的错？控制台有没有提示？或者把你的nginx发出来看看你的配置

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        off;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;


    server {
        listen 80;
        server_name www.jiayuewu.com;

        location / {
            root   /home/jiayue/zhuye;
            try_files $uri $uri/ /index.html;
            index  index.html;
        }

        location /api/ {
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass   http://127.0.0.1:4711/;
        }
    }
}

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/7692924
• 你也可以参考下这篇文章：nginx服务器及部署vue的常见问题
• 除此之外, 这篇博客: Nginx反向代理解决Vue跨域问题中的 后端配置跨域，如下是springboot的配置 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

  public class TestApplication implements WebMvcConfigurer {
  
      public static void main(String[] args) {
          SpringApplication.run(TestApplication.class, args);
      }
  
      @Override
      protected void addCorsMappings(CorsRegistry registry) {
          // 解决跨域问题
          registry.addMapping("/**")
                  .allowCredentials(true)
                  .allowedHeaders("*")
                  .allowedOrigins("*")
                  .allowedMethods("*")
                  .maxAge(3600);
          super.addCorsMappings(registry);
      }
  }
  

  但是在复杂请求时（带自定义的请求头参数），由于浏览器的自检机制，会先发送一次options请求，这无疑会增加服务器的负担，这就很烦，那么怎么解决这个问题呢？马上揭晓答案

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^