详解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 相关文章推荐
浅谈轻量级js模板引擎simplite
Feb 13 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
Jun 05 Javascript
详谈javascript精度问题与调整
Jul 08 Javascript
Vue ElementUI之Form表单验证遇到的问题
Aug 21 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
Nov 22 Javascript
谈谈JS中的!!
Dec 07 Javascript
vue组件实现进度条效果
Jun 06 Javascript
vue 组件的封装之基于axios的ajax请求方法
Aug 11 Javascript
Vue多组件仓库开发与发布详解
Feb 28 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
Sep 28 Javascript
vue 动态添加class,三个以上的条件做判断方式
Nov 02 Javascript
nestjs返回给前端数据格式的封装实现
Feb 22 Javascript
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 结果集的分页实现代码
2009/03/10 PHP
smarty简单入门实例
2014/11/28 PHP
PHP抽奖算法程序代码分享
2015/10/08 PHP
PHP7多线程搭建教程
2017/04/21 PHP
php实现自定义中奖项数和概率的抽奖函数示例
2017/05/26 PHP
基于jquery的滚动新闻列表
2010/06/19 Javascript
Jquery Autocomplete 结合asp.net使用要点
2010/10/29 Javascript
js类式继承的具体实现方法
2013/12/31 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
2014/10/17 Javascript
JavaScript 学习笔记之基础中的基础
2015/01/13 Javascript
JavaScript实现同步于本地时间的动态时间显示方法
2015/02/02 Javascript
Jquery中$.post和$.ajax的用法小结
2015/04/28 Javascript
JavaScript中Cookies的相关使用教程
2015/06/04 Javascript
javascript文件加载管理简单实现方法
2015/07/25 Javascript
关于function类中定义变量this的简单说明
2016/05/28 Javascript
HTML页面定时跳转方法解析(2种任选)
2016/12/22 Javascript
微信小程序实现图片上传功能实例(前端+PHP后端)
2018/01/10 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
2018/06/07 Javascript
解决eclipse中没有js代码提示的问题
2018/10/10 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
2019/06/20 Javascript
Angular封装表单控件及思想总结
2019/12/11 Javascript
js定时器出现第一次延迟的原因及解决方法
2021/01/04 Javascript
python读写ini文件示例(python读写文件)
2014/03/25 Python
python通过smpt发送邮件的方法
2015/04/30 Python
python好玩的项目—色情图片识别代码分享
2017/11/07 Python
详解Python if-elif-else知识点
2018/06/11 Python
Python使用reportlab模块生成PDF格式的文档
2019/03/11 Python
python:删除离群值操作(每一行为一类数据)
2020/06/08 Python
html5实现的便签特效(实战分享)
2013/11/29 HTML / CSS
中国综合网上购物商城:苏宁易购
2016/08/09 全球购物
EJB timer的种类
2014/10/28 面试题
银行贷款委托书范本
2014/10/11 职场文书
2015年世界环境日演讲稿
2015/03/18 职场文书
护士2015年终工作总结
2015/04/29 职场文书
小学运动会前导词
2015/07/20 职场文书
「魔导具师妲莉亚永不妥协~从今天开始的自由职人生活~」1、2卷发售宣传CM公开
2022/03/21 日漫