vue+axios+eggjs前后端分离打包部署之后访问接口404

vue打包之后部署服务器访问服务器端接口404

1.vue+axios本地开发环境请求线上服务器接口跨域没有问题

开发环境跨域配置

//  vue.config.js
devServer: {
    proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: 'http:xx.xx.xx', //对应跨域的接口
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '/api': ''
        },
        secure:false,
      },
    },

eggjs服务端跨域配置已开启跨域

//  config.default.js
security: {
      csrf: {
        enable: false,
        ignoreJSON: true
      },
      domainWhiteList: ['*']
    },
    cors: {
      enable: true,
      origin: '*',
      allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH'
    },


//  plugin.js
cors: {
    enable: true,
    package: 'egg-cors'
  },

2.vue打包部署之后访问服务器接口404

3.解决办法：配置nginx代理

server
{
    listen 5000;
    server_name eggjsdemo;
    index index.php index.html index.htm default.php default.htm default.html;
    root /www/h5/camp_entry/add;
    
    include enable-php-00.conf;
    
    
    location / {
            root  /www/h5/camp_entry/add;
            try_files $uri $uri/ /index.html
            a#dd_header 'Access-Control-Allow-Origin' '*';
            index  index.html index.htm;
    }
    location /guns/ {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'POST,GET,OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'Authorization';
            proxy_pass http://xxx.xxx.xxx/;  //  代理地址
    }
}