详解vue-cli本地环境API代理设置和解决跨域


Posted in Javascript onSeptember 05, 2017

前言

我们在使用vue-cli启动项目的时候npm run dev便可以启动我们的项目了,通常我们的请求地址是以localhost:8080来请求接口数据的,localhost是没有办法设置cookie的。

我们可以在vue-cli配置文件里面设置一个代理,跨域的方法有很多,通常需要后台来进行配置。我们可以直接通过node.js代理服务器来实现跨域请求。

vue proxyTable接口跨域请求调试

在vue-cli项目中的config文件夹下的index.js配置文件中,dev长这样子:

dev: {
  env: require('./dev.env'),
  port: 8080,
  autoOpenBrowser: true,
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  proxyTable: {},  
  cssSourceMap: false
 }

服务器提供的接口如果长这样https://www.exaple.com/server_new/login,我们把域名提取出来如https://www.exaple.com;

在config中新建一个文件命名为proxyConfig.js :

module.exports = {
 proxy: {
    '/apis': {  //将www.exaple.com印射为/apis
      target: 'https://www.exaple.com', // 接口域名
      changeOrigin: true, //是否跨域
      pathRewrite: {
        '^/apis': ''  //需要rewrite的,
      }       
    }
 }
}

config文件夹下的index.js引入proxyConfig.js:

var proxyConfig = require('./proxyConfig')

config文件夹下的index.js中的dev改成:

dev: {
  env: require('./dev.env'),
  port: 8080,
  autoOpenBrowser: true,
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  proxyTable: proxyConfig.proxy,
  cssSourceMap: false
 }

重启项目npm run dev:

你会发现出现了这个

详解vue-cli本地环境API代理设置和解决跨域 

这个时候我们已经设置好了本地API代理了

修改本地hosts文件

文件路径一般是C:\Window\System32\drivers\etc,打开hosts文件,在这一段下面把localhost设置进去

# localhost name resolution is handled within DNS itself.
# 127.0.0.1    localhost
# ::1       localhost
127.0.0.1          activate.adobe.com
127.0.0.1          practivate.adobe.com
127.0.0.1          lmlicenses.wip4.adobe.com
127.0.0.1          lm.licenses.adobe.com
127.0.0.1          na1r.services.adobe.com
127.0.0.1          hlrcv.stage.adobe.com

localhost          www.exaple.com

搞定

此时我们已经完全解决了跨域问题,以及本地测试后台无法向我们本地环境设置cookie的情况了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
找到一点可怜的关于dojo资料,谢谢作者!
Dec 06 Javascript
jQuery之自动完成组件的深入解析
Jun 19 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
Sep 03 Javascript
js实现Select下拉框具有输入功能的方法
Feb 06 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
Apr 06 Javascript
JS验证IP,子网掩码,网关和MAC的方法
Jul 02 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
Apr 01 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
Sep 12 Javascript
JS实现“全选”和"全不选"功能代码实例
Feb 06 Javascript
vue监听滚动事件的方法
Dec 21 Vue.js
绘制微信小程序验证码功能的实例代码
Jan 05 Javascript
vue-cli4.5.x快速搭建项目
May 30 Vue.js
JavaScript正则表达式的贪婪匹配和非贪婪匹配
Sep 05 #Javascript
浅谈Vue.js中的v-on(事件处理)
Sep 05 #Javascript
Angular实现下载安装包的功能代码分享
Sep 05 #Javascript
简单谈谈关于Angular Cli打包的事
Sep 05 #Javascript
Vue学习笔记之表单输入控件绑定
Sep 05 #Javascript
zTree异步加载展开第一级节点的实现方法
Sep 05 #Javascript
纯js实现画一棵树的示例
Sep 05 #Javascript
You might like
PHP.MVC的模板标签系统(三)
2006/09/05 PHP
php 动态多文件上传
2009/01/18 PHP
PHP学习之正则表达式
2011/04/17 PHP
PHP+Mysql+Ajax+JS实现省市区三级联动
2014/05/23 PHP
文本加密解密
2006/06/23 Javascript
jQuery 白痴级入门教程
2009/11/11 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
2014/06/06 Javascript
一个很有趣3D球状标签云兼容IE8
2014/08/22 Javascript
JS倒计时代码汇总
2014/11/25 Javascript
JavaScript实现SHA-1加密算法的方法
2015/03/11 Javascript
谈谈AngularJs中的隐藏和显示
2015/12/09 Javascript
jQuery简单入门示例之用户校验demo示例
2016/07/09 Javascript
浅析Javascript ES6新增值比较函数Object.is
2016/08/24 Javascript
js设置和获取自定义属性的方法
2016/10/20 Javascript
微信小程序 开发工具快捷键整理
2016/10/31 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
2017/01/21 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
2017/12/16 Javascript
详解Angular Forms中自定义ngModel绑定值的方式
2018/12/10 Javascript
Vue2.0实现简单分页及跳转效果
2019/07/29 Javascript
基于vue实现图片验证码倒计时60s功能
2019/12/10 Javascript
python去除所有html标签的方法
2015/05/05 Python
Python中Random和Math模块学习笔记
2015/05/18 Python
Python3.7黑帽编程之病毒篇(基础篇)
2020/02/04 Python
Python使用pyenv实现多环境管理
2021/02/05 Python
LG西班牙网上商店:Tienda LG Online Es
2019/07/30 全球购物
Pedro官网:新加坡时尚品牌
2019/08/27 全球购物
Ruby如何进行文件操作
2014/07/17 面试题
俄语翻译实习生的自我评价分享
2013/11/06 职场文书
人力资源专业推荐信
2013/11/29 职场文书
幼儿园清明节活动总结
2014/07/04 职场文书
酒店辞职书怎么写
2015/02/26 职场文书
学校捐书倡议书
2015/04/27 职场文书
后天观后感
2015/06/08 职场文书
生日宴会家属答谢词
2015/09/29 职场文书
oracle通过存储过程上传list保存功能
2021/05/12 Oracle
redis lua限流算法实现示例
2022/07/15 Redis