详解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 相关文章推荐
帮助避免错误的Javascript陷阱清单
May 31 Javascript
各情景下元素宽高的获取实现代码
Sep 13 Javascript
JS分页效果示例
Oct 11 Javascript
JavaScript排序算法之希尔排序的2个实例
Apr 04 Javascript
JavaScript实现查找字符串中第一个不重复的字符
Dec 29 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
Mar 18 Javascript
Js数组排序函数sort()介绍
Jun 08 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
Jun 19 Javascript
vue中如何实现pdf文件预览的方法
Jul 12 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 jQuery
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
Jul 20 Javascript
Vue解决移动端弹窗滚动穿透问题
Dec 15 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下实现一个阿拉伯数字转中文数字的函数
2008/07/10 PHP
实用的简单PHP分页集合包括使用方法
2013/10/21 PHP
详解PHP中websocket的使用方法
2016/09/15 PHP
php rsa 加密,解密,签名,验签详解
2016/12/06 PHP
php实现简单加入购物车功能
2017/03/07 PHP
快速排序 php与javascript的不同之处
2011/02/22 Javascript
javascript之典型高阶函数应用介绍二
2013/01/10 Javascript
node.js中实现同步操作的3种实现方法
2014/12/05 Javascript
javascript实现避免页面按钮重复提交
2015/01/08 Javascript
JS设置网页图片vspace和hspace属性的方法
2015/04/01 Javascript
JavaScript实现模仿桌面窗口的方法
2015/07/18 Javascript
JavaScript_ECMA5数组新特性详解
2016/06/12 Javascript
jQuery为动态生成的select元素添加事件的方法
2016/08/29 Javascript
js代码实现下拉菜单【推荐】
2016/12/15 Javascript
Bootstrap CSS使用方法
2016/12/23 Javascript
angularjs1.5 组件内用函数向外传值的实例
2018/09/30 Javascript
详解CommonJS和ES6模块循环加载处理的区别
2018/12/26 Javascript
ES5和ES6中类的区别总结
2020/12/21 Javascript
如何用Python实现简单的Markdown转换器
2018/07/16 Python
Python Scapy随心所欲研究TCP协议栈
2018/11/20 Python
pandas去除重复列的实现方法
2019/01/29 Python
python登录WeChat 实现自动回复实例详解
2019/05/28 Python
如何在 Django 模板中输出 "{{"
2020/01/24 Python
python实现猜单词游戏
2020/05/22 Python
python等待10秒执行下一命令的方法
2020/07/19 Python
玩具反斗城美国官网:Toys"R"Us
2016/09/17 全球购物
程序集与命名空间有什么不同
2014/07/25 面试题
会计实习期自我鉴定
2013/10/06 职场文书
英语系毕业生自荐信
2013/10/31 职场文书
高中军训感想300字
2014/03/04 职场文书
监察建议书格式
2014/05/19 职场文书
汽车销售助理岗位职责
2015/04/14 职场文书
一个都不能少观后感
2015/06/04 职场文书
活动宣传稿范文
2015/07/23 职场文书
Redis中有序集合的内部实现方式的详细介绍
2022/03/16 Redis
python开发人人对战的五子棋小游戏
2022/05/02 Python