背景：前端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 前端部署后代理走不通，那就从后端入手了，接下篇
网友评论