vue上传文件本地DevServer代理可走通，部署后跨域问题解决（一）

背景：前端VUE启动在本地localhost:8077 后端Springboot也启动在本地 localhost:8099
前端上传文件调用后端接口出现跨域问题（在下一篇结合后端代码一起讲解），最开始考虑的是加上了代理，本地调通了以后打包部署，然后用的是http-server

npm run build
cd dist
http-server

为什么本地代理走的好好的，打包部署代理就不生效了呢，考虑可能存在：
1.npm run dev 和npm run build 走的代理路径不一样
2.http-server不支持代理
先看本地设置代理，npm run dev的情况：
/AssignCase.vue

<template>
  <div>
    <el-tabs><el-tab-pane label="信立坦病例分配给专家点评">按以下模板上传Excel即可触发</el-tab-pane></el-tabs>
    <el-image
      :src='require("../../assets/xinlitan.png")'
      :fit="fit"></el-image>
    <el-upload
    class="upload-demo"
    ref="upload"
    :on-change="handleChange"   
    :file-list="fileList"
    :limit="1"        
    drag
    action="apiwx/token/assigncase/"    
    accept=".xlsx,.xls"  
    :with-credentials=true
    show-file-list
    :on-success="handleAvatarSuccess"
    >
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    <div class="el-upload__tip" slot="tip">只能上传Excel文件，格式xls、xlsx</div>
    </el-upload>
    <span>{{assignresult}}</span>
  </div>
</template>
<script>
export default {
  name: 'submitUpload',
  data(){
    return{
      fileList:[],
      assignresult:''
    }
  },
  methods: {
    handleChange:function(file,fileList) {
      console.log('文件改变了')
      console.log(file)
      },
      handleAvatarSuccess(response){
      console.log('文件上传了')
      console.log(response)
        if (response.msg === 'OK') {
          console.log("response ok")
          this.assignresult = response.data
      }
        else{
          this.assignresult = response.msg
        }
    }
  }
}
</script>

代理设置在/config/index.js

'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.

const path = require('path')

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
  
      '/apiwx': {
        // 测试环境
        target: 'http://localhost:8077',  // 接口域名
        changeOrigin: true,  //是否跨域
        pathRewrite: {
          '^/apiwx': ''   //请求后端的路径不带/apiwx这里重写值为空
        }
      }
     },
    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8099, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

    // Use Eslint Loader?
    // If true, your code will be linted during bundling and
    // linting errors and warnings will be shown in the console.
    useEslint: true,
    // If true, eslint errors and warnings will also be shown in the error overlay
    // in the browser.
    showEslintErrorsInOverlay: false,

    /**
     * Source Maps
     */

    // https://webpack.js.org/configuration/devtool/#development
    devtool: 'cheap-module-eval-source-map',

    // If you have problems debugging vue-files in devtools,
    // set this to false - it *may* help
    // https://vue-loader.vuejs.org/en/options.html#cachebusting
    cacheBusting: true,

    cssSourceMap: true
  },

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',

    /**
     * Source Maps
     */

    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',
    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }
}

此时npm run dev本地跑走的dev，而npm run build走的build，如下：
/package.json dev 后面跟的脚本是webpack-dev-server

...略
"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js"
  },
...略

先看dev走的webpack.dev.conf.js

npm run dev走dev的代理.png

publicPath.png

build/build.js

image.png

webpack.prod.conf.js 与webpack.dev.conf.js对比

image.png

可以看到右侧文件webpack.prod.conf.js是没有devServer的，也没有任何proxy的设置
因此单单尝试在/config/index.js里build里面加proxyTable是不会生效的

'use strict'
const path = require('path')
module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/apiwx': {
        // 测试环境
        target: 'http://localhost:8077',  // 接口域名
        changeOrigin: true,  //是否跨域
        pathRewrite: {
          '^/apiwx': ''   
        }
      }
     },
    //此处省略
  },
  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),
    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',
    proxyTable: {
      '/apiwx': {
        target: 'http://localhost:8077',  // 接口域名
        changeOrigin: true,  //是否跨域
        pathRewrite: {
          '^/apiwx': ''  
        }
      }
     },
   //此处省略
}

在开发模式下，DevServer 提供虚拟服务器，让我们进行开发和调试。

查了一下网上遇到的各种部署后代理不生效的问题，参考一位比较相似的

用webpack-dev-server做了一些接口代理的工作（代理qq音乐的API），所以和传统纯前端项目还有所不同，不是打包压缩扔到nginx静态目录就行。需要在生产上启动这个webpack-dev-server服务。

他是在远程生产服务器上下载了整个工程，npm install然后pm2 start npm --watch --name myApp -- run dev启动这个webpack-dev-server服务
本工程用的是本地服务器http-server 前端部署后代理走不通，那就从后端入手了，接下篇