新版vue-cli模板下本地开发环境使用node服务器跨域的方法


Posted in Javascript onApril 03, 2018

背景

我们都知道浏览器有一个既核心也最基本的安全功能,即同源策略。同源分别是:协议,域名,端口。如果浏览器访问服务器不同源的话,就会访问不到数据。那开发中常常访问的服务器不同源,那么可以借助一个服务器当做中介来访问需要访问的服务器从而获得数据。因为同源策略是浏览器的安全机制,而服务器之间是不受此限制的。之前vue-cli模板build文件夹下有dev-serve.js文件,可以在此文件中配置本地node服务器实现跨域,现在的模板下没有此文件,那我们该如何使用node跨域呢?不逼逼,上方法。

具体操作

1、在build文件夹下面新建一个dev-serve.js文件,其中添加代码如下:

'use strict'
const express = require('express')
const axios = require('axios')

module.exports = function () {
  let app = express()
  app.get('/api/getDiscList', (req, res) => {
    let url = '请求地址'
    axios.get(url, {
      headers: {
      //这里请求的是QQ音乐的接口,带上下面参数是为了骗服务器是自己人
        referer: 'https://c.y.qq.com/',
        host: 'c.y.qq.com'
      },
      params: req.query
    }).then((response) => {
      res.json(response.data)
    }).catch((e) => {
      console.log(e)
    })
  })

  app.listen(3000)
}

2、在build.js中引入并且运行只需要在最上面添加 require('./dev-serve.js')()

当我们npm run dev运行项目的时候,node服务器就会启动自动监听3000端口

3.本地发送ajax请求,就可以通过node服务器访问到数据,请求我使用的是axios。请求如下:

import axios from 'axios'
function getDiscList() {  

  const data = {
    //...请求参数
  }
  return axios.get('/api/getDiscList', {
    params: data
  }).then(res => {
    return Promise.resolve(res.data)
  })
}

请求到数据如下:

新版vue-cli模板下本地开发环境使用node服务器跨域的方法

新版vue-cli模板下本地开发环境使用node服务器跨域的方法

结语

如此就简单实现了本地node服务器跨域,在开发环境下是可以请求到数据,但是npm run build 打包成静态文件后就失效了。路还很长,还请各位不吝赐教。

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

Javascript 相关文章推荐
最新28个很棒的jQuery 教程
May 28 Javascript
jquery中获取select选中值的代码
Jun 27 Javascript
jquery ajax中使用jsonp的限制解决方法
Nov 22 Javascript
Js获取下拉框选定项的值和文本的实现代码
Feb 26 Javascript
jquery判断元素是否隐藏的多种方法
May 06 Javascript
JavaScript修改作用域外变量的方法
Mar 25 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
Aug 11 Javascript
JQuery动态添加Select的Option元素实现方法
Aug 29 Javascript
js设置文字颜色的方法示例
Dec 30 Javascript
javascript 中iframe高度自适应(同域)实例详解
May 16 Javascript
解决element-ui的下拉框有值却无法选中的情况
Nov 07 Javascript
React-vscode使用jsx语法的问题及解决方法
Jun 21 Javascript
使用react实现手机号的数据同步显示功能的示例代码
Apr 03 #Javascript
JS遍历DOM文档树的方法实例详解
Apr 03 #Javascript
JavaScript同源策略和跨域访问实例详解
Apr 03 #Javascript
vue 组件中slot插口的具体用法
Apr 03 #Javascript
react 实现页面代码分割、按需加载的方法
Apr 03 #Javascript
深入浅析Vue中的slots/scoped slots
Apr 03 #Javascript
使用FileReader API创建Vue文件阅读器组件
Apr 03 #Javascript
You might like
PHP 表单提交给自己
2008/07/24 PHP
个人写的PHP验证码生成类分享
2014/08/21 PHP
Zend Framework动作助手Url用法详解
2016/03/05 PHP
php中数组最简单的使用方法
2020/12/27 PHP
jQuery在vs2008及js文件中的无智能提示的解决方法
2010/12/30 Javascript
浅析document.ready和window.onload的区别讲解
2013/12/18 Javascript
jQuery 设置 CSS 属性示例介绍
2014/01/16 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
2015/08/17 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
2016/08/26 Javascript
JavaScript 闭包机制详解及实例代码
2016/10/10 Javascript
Vue.js双向绑定实现原理详解
2016/12/22 Javascript
Angular表格神器ui-grid应用详解
2017/09/29 Javascript
JavaScript代码调试方法实例小结
2019/01/05 Javascript
puppeteer实现html截图的示例代码
2019/01/10 Javascript
微信小程序如何使用云开发
2019/05/17 Javascript
原生js实现的金山打字小游戏(实例代码详解)
2020/03/16 Javascript
JavaScript中while循环的基础使用教程
2020/08/11 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
详解Python中映射类型的内建函数和工厂函数
2015/08/19 Python
Python 专题五 列表基础知识(二维list排序、获取下标和处理txt文本实例)
2017/03/20 Python
使用Python生成XML的方法实例
2017/03/21 Python
Python判断两个list是否是父子集关系的实例
2018/05/04 Python
Django代码性能优化与Pycharm Profile使用详解
2018/08/26 Python
对python以16进制打印字节数组的方法详解
2019/01/24 Python
利用python实现汉字转拼音的2种方法
2019/08/12 Python
pymongo insert_many 批量插入的实例
2020/12/05 Python
香港艺人陈冠希创办的潮流品牌:JUICESTORE
2021/03/04 全球购物
Linux Interview Questions For software testers
2012/06/02 面试题
工程师自我评价怎么写
2013/09/19 职场文书
高分子材料与工程专业推荐信
2013/12/01 职场文书
大学四年学习的自我评价分享
2013/12/09 职场文书
集中整治工作方案
2014/05/01 职场文书
音乐学专业求职信
2014/07/22 职场文书
公安局班子个人对照检查材料思想汇报
2014/10/09 职场文书
客户答谢会致辞
2015/01/20 职场文书
2016年庆祝六一儿童节活动总结
2016/04/06 职场文书