vue : 本地调试跨域问题的解决办法:proxyTable
2024-09-05 18:46:43
本来我是不想写的,但为了加深印象还是写一写吧。
./config/index.js
module.exports = {
dev: { // Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': { //使用"/api"来代替"http://charon-satellite.com"
target: 'http://xxx.charon-satellite.com', //源地址
secure: false, // 如果是https接口,需要配置这个参数
changeOrigin: true, //改变源
pathRewrite: {
'^/api': '' //路径重写
}
}
}, // Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8080, // 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- /**
* 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
}
}
./api.js (管理接口的JS文件)
...
// export const base = 'http://xxx.charon-satellite.com'; // 线上
export const base = '/api'; // 本地
export const qs = require('qs') // public
export const login = base + '/xxx/xxx/dologin'; // 登录
...
原理:简单的说就是利用了vue所用的node.js服务器环境,建立代理服务器,使本地的域名与线上域名相同。
最新文章
- [LeetCode] Populating Next Right Pointers in Each Node 每个节点的右向指针
- CentOS 新增swap交换空间
- sublimeText3安装emmet(For Mac)
- REDIS源码中一些值得学习的技术细节02
- Android笔记: Android版本号
- hunnu 修路
- Winform开发--控件
- 使用tornado让你的请求异步非阻塞
- 在后台代码中引入XAML的方法
- Dreamwaver 使用root用户连接不上远程服务器
- 在web应用程序中使用MemcachedClient
- zf-关于统计分析表单导出(写这个的 太麻烦了)
- Windows命令行command的Shell命令详细解析和语法
- android与js的交互之jsbridge使用
- 三星S8相机黑画面解决
- android.view.WindowManager$BadTokenException: Unable to add window
- TP增删改
- ES6 学习笔记之三 函数参数默认值
- MySQL Group Replication配置
- android 使用AsyncHttpClient框架上传文件以及使用HttpURLConnection下载文件