新版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 相关文章推荐
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
Nov 04 Javascript
jquery focus(fn),blur(fn)方法实例代码
Dec 16 Javascript
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
Jan 29 Javascript
jquery实现textarea输入字符控制(仿微博输入控制字符)
Apr 26 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
Nov 21 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
Aug 03 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
Jun 12 Javascript
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
Jul 14 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
Jul 11 Javascript
浅谈react-router@4.0 使用方法和源码分析
Jun 04 Javascript
解决vue项目,npm run build后,报路径错的问题
Aug 13 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
Nov 16 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版(2)
2006/10/09 PHP
浅谈PHP中JSON数据操作
2015/07/01 PHP
PHP 实现文件压缩解压操作的方法
2019/06/14 PHP
PHP 计算两个时间段之间交集的天数示例
2019/10/24 PHP
firefox和IE系列的相关区别整理 以备后用
2009/12/28 Javascript
js的2种继承方式详解
2014/03/04 Javascript
js实现简单的购物车有图有代码
2014/05/26 Javascript
node.js中的fs.exists方法使用说明
2014/12/17 Javascript
浅析Node.js 中 Stream API 的使用
2015/10/23 Javascript
jquery编写Tab选项卡滚动导航切换特效
2020/07/17 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
2017/02/14 Javascript
jQuery完成表单验证的实例代码(纯代码)
2017/09/30 jQuery
webpack打包js文件及部署的实现方法
2017/12/18 Javascript
微信小程序js文件改变参数并在视图上及时更新【推荐】
2018/06/11 Javascript
JavaScript如何获取一个元素的样式信息
2019/07/29 Javascript
JavaScript 作用域实例分析
2019/10/02 Javascript
Vue实现仿iPhone悬浮球的示例代码
2020/03/13 Javascript
js实现弹窗效果
2020/08/09 Javascript
Python备份Mysql脚本
2008/08/11 Python
python解析html开发库pyquery使用方法
2014/02/07 Python
Python用5行代码写一个自定义简单二维码
2018/10/21 Python
基于YUV 数据格式详解及python实现方式
2019/12/09 Python
python itsdangerous模块的具体使用方法
2020/02/17 Python
如何利用python检测图片是否包含二维码
2020/10/15 Python
英国高街品牌:Miss Selfridge(塞尔弗里奇小姐)
2016/09/21 全球购物
欧洲最大的球衣网上商店:Kitbag
2017/11/11 全球购物
美国瑜伽服装和装备购物网站:Mukha Yoga
2019/02/22 全球购物
聚网科技C++面试笔试题
2015/09/01 面试题
请写出 float x 与"零值"比较的 if 语句
2016/01/04 面试题
教师党员思想汇报
2014/01/06 职场文书
学校岗位设置方案
2014/01/16 职场文书
自我鉴定 电子商务专业
2014/01/30 职场文书
教师简历自我评价
2014/02/03 职场文书
大学生两会学习心得体会
2014/03/10 职场文书
不同意离婚答辩状
2015/05/22 职场文书
2015年体检中心工作总结
2015/05/27 职场文书