nginx上部署多个vue项目,目前可以访问到页面静态资源,但无法请求到后端接口

nginx上部署多个vue项目,目前可以访问到页面静态资源,但无法请求到后端接口

vue.config.js的配置信息

// 跨域配置
module.exports = {
  devServer: {                //记住,别写错了devServer//设置本地默认端口  选填
      port: 9333,
      proxy: {                 //设置代理,必须填
          '/apis': {              //设置拦截器  拦截器格式   斜杠+拦截器名字,名字可以自己定
              target: 'http://172.22.1.27:8010',     //代理的目标地址 ,//process.env.VUE_APP_SERVER_URL 'http://192.168.80.129:8000''http://172.22.1.27:8000'
              changeOrigin: true,              //是否设置同源,输入是的
              pathRewrite: {                   //路径重写
                  '^/apis': ''                     //选择忽略拦截器里面的单词
              }
          }
      }
  },
  pwa:{
      iconPaths:{
          favicon32:'./favicon.ico',
          favicon16:'./favicon.ico',
          appleTouchIcon:'./favicon.ico',
          maskIcon:'./favicon.ico',
          msTileImage:'./favicon.ico',

      }
  },
  publicPath: process.env.NODE_ENV === 'production'
        ? '/app/mall/'   // /app/mall/ 对应后面`nginx`路径,这里添加的目的是其他静态资源文件统一前缀路径
        : '/',

}

nginx.conf的配置

server {
listen 9333;
server_name localhost;

    #charset koi8-r;

    #access_log  logs/host.access.log  main;

    location / {
        root   html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    location /other/ {
        root   html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

location /app/mall {
        alias   mall;
        index   index.html index.htm;
        try_files $uri $uri/ /app/mall/index.html;
    }
location /apis {
        proxy_pass   http://172.22.1.27:8010;
    }

    location /api {
        rewrite  ^.+api/?(.*)$ /$1 break;
        proxy_pass  http://172.22.1.27:8000;
        proxy_redirect off;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
     }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }

}

页面报错信息

img

img

你后台的接口就不要用nginx代理了吧
你vue项目已经做了一层代理