vue : 本地调试跨域问题的解决办法:proxyTable
本来我是不想写的,但为了加深印象还是写一写吧。
./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服务器环境,建立代理服务器,使本地的域名与线上域名相同。
vue : 本地调试跨域问题的解决办法:proxyTable的更多相关文章
- vue 本地调试跨域---带cookies(axios)
cookise跨域第二期之便捷优雅的本地调试(axios) 1.打开config/index.js,在proxyTable中添写如下代码: proxyTable: { '/agent': { //使用 ...
- WebApi2跨域问题及解决办法
跨域问题产生的原因 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能.现在所有支持JavaScript的浏览器都会使用这个策略.所谓同源是指,域名,协议, ...
- 阿里云OSS上传文件本地调试跨域问题解决
问题描述: 最近后台说为了提高上传效率,要前端直接上传文件到阿里云,而不经过后台.因为在阿里云服务器设置的允许源(region)为某个固定的域名下的源(例如*.cheche.com),直接在本地访问会 ...
- chrome本地调试跨域问题
1.关闭chrome浏览器(全部) 我们可以通过使用chrome命令行启动参数来改变chrome浏览器的设置,具体的启动参数说明参考这篇介绍.https://code.google.com/p/xia ...
- Jquery AJAX ASP.NET IIS 跨域 超简单解决办法
第一种: 在IIS添加如下标头即可 Access-Control-Allow-Headers:Content-Type, api_key, AuthorizationAccess-Control-Al ...
- [转]JavaScript跨域总结与解决办法
转载自http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html仅用作个人读书笔记. 什么是跨域 1.document.domain+ ...
- JavaScript跨域总结与解决办法
什么是跨域 1.document.domain+iframe的设置 2.动态创建script 3.利用iframe和location.hash 4.window.name实现的跨域数据传输 5.使用H ...
- JavaScript跨域总结与解决办法(转)
JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦.这里把涉及到跨域的一些问题简单地整理一下: 首先什么是跨域 ...
- JavaScript跨域总结与解决办法 什么是跨域
什么是跨域 1.document.domain+iframe的设置 2.动态创建script 3.利用iframe和location.hash 4.window.name实现的跨域数据传输 5.使用H ...
随机推荐
- python中那些鲜为人知的功能特性
经常逛GitHub的可能关注一个牛叉的项目,叫 What the f*ck Python! 这个项目列出了几乎所有python中那些鲜为人知的功能特性,有些功能第一次遇见时,你会冒出 what the ...
- GridView绑定数据与隐藏指定控件(模板列)
1.1. GridView绑定数据 1) 可以配置SqlDataSource数据源,修改select语句生成框架(不想手动绑定) 2) 删除DataSourceID属性和 ...
- 初识MQ消息队列
MQ 消息队列 消息队列(Message Queue)简称MQ,是阿里巴巴集团中间件技术部自主研发的专业消息中间件. 产品基于高可用分布式集群技术,提供消息发布订阅.消息轨迹查询.定时(延时)消息.资 ...
- VulnHub PowerGrid 1.0.1靶机渗透
本文首发于微信公众号:VulnHub PowerGrid 1.0.1靶机渗透,未经授权,禁止转载. 难度评级:☆☆☆☆☆官网地址:https://download.vulnhub.com/power ...
- mybatis缓存之一级缓存(二)
这篇文章介绍下mybatis的一级缓存的生命周期 一级缓存的产生 一级缓存的产生,并不是看mappper的xml文件的select方法,看下面的例子 mapper.xml <select id= ...
- 进度条的使用 Progress控件
MFC编程实例二:进度条的使用 2011-03-22 09:09:09| 分类: C++(C语言) | 标签:进度 nlower nupper 添加 mfc |字号 订阅 本人用的 ...
- mybatis源码配置文件解析之五:解析mappers标签
在上篇博客中分析了plugins标签,<mybatis源码配置文件解析之四:解析plugins标签>,了解了其使用方式及背后的原理.现在来分析<mappers>标签. 一.概述 ...
- 如何查看class文件的jdk版本
版权声明:本文为博主原创文章,转载请注明本文链接.文章内容如有错误望能指正,以免误导更多人. https://blog.csdn.net/gnail_oug/article/details/47145 ...
- 超简单集成ML kit 实现听写单词播报
背景 相信我们大家在刚开始学习一门语言的时候都有过听写,现在的小学生学语文的时候一项重要的课后作业就是听写课文中的生词,很多家长们都有这方面的经历.不过一方面这种读单词的动作相对简单,另一方面家长 ...
- Zookeeper-Access Control List(ACL)
概述 Z K作为一个分布式协调框架.内部存储着一些分布式系统运行时状态的元数据.如何有效的保护这些数据的安全.如何做一个比较好的权限控制显得非常的重要. ZK 为我们提供一套完善的 ACL(acces ...