新版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 相关文章推荐
模拟jQuery ajax服务器端与客户端通信的代码
Mar 28 Javascript
JavaScript删除指定子元素代码实例
Jan 13 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
Nov 27 Javascript
javascript检测移动设备横竖屏
May 21 Javascript
利用浮层使select不可选的实现方法
Dec 03 Javascript
实例详解display:none与visible:hidden的区别
Mar 30 Javascript
JS实现图片预览的两种方式
Jun 27 Javascript
vue element table 表格请求后台排序的方法
Sep 28 Javascript
微信小程序实现顶部下拉菜单栏
Nov 04 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
May 14 Javascript
解决vue中的无限循环问题
Jul 27 Javascript
ajax jquery实现页面某一个div的刷新效果
Mar 04 jQuery
使用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
Windows PHP5和Apache的安装与配置
2009/06/08 PHP
基于php(Thinkphp)+jquery 实现ajax多选反选不选删除数据功能
2017/02/24 PHP
php压缩文件夹最新版
2018/07/18 PHP
php链式操作的实现方式分析
2019/08/12 PHP
制作高质量的JQuery Plugin 插件的方法
2010/04/20 Javascript
6款新颖的jQuery和CSS3进度条插件推荐
2013/03/05 Javascript
jQuery插件ajaxfileupload.js实现上传文件
2020/10/23 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
2017/02/09 Javascript
Angular.js之作用域scope'@','=','&'实例详解
2017/02/28 Javascript
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
详解AngularJS 过滤器的使用
2018/06/02 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
2018/12/06 Javascript
js实现贪吃蛇小游戏(加墙)
2020/07/31 Javascript
python抓取京东价格分析京东商品价格走势
2014/01/09 Python
Python程序设计入门(4)模块和包
2014/06/16 Python
各种Python库安装包下载地址与安装过程详细介绍(Windows版)
2016/11/02 Python
Python字典,函数,全局变量代码解析
2017/12/18 Python
基于python 处理中文路径的终极解决方法
2018/04/12 Python
python 对多个csv文件分别进行处理的方法
2019/01/07 Python
Django框架使用mysql视图操作示例
2019/05/15 Python
python求最大值最小值方法总结
2019/06/25 Python
PyCharm刷新项目(文件)目录的实现
2020/02/14 Python
python如何从键盘获取输入实例
2020/06/18 Python
Pyside2中嵌入Matplotlib的绘图的实现
2021/02/22 Python
英国莱斯特松木橡木家具网上商店:Choice Furniture Superstore
2019/07/05 全球购物
莫斯科的韩国化妆品店:Sifo
2019/12/04 全球购物
澳大利亚最便宜的网上药房:Chemist Warehouse
2020/01/30 全球购物
集团公司总经理岗位职责
2013/12/20 职场文书
《三顾茅庐》教学反思
2014/04/10 职场文书
世界上超棒的8种逻辑思维
2019/08/06 职场文书
解析:创业计划书和商业计划书二者之间到底有什么区别
2019/08/14 职场文书
html+css 实现简易导航栏功能
2021/04/07 HTML / CSS
PHP连接MSSQL数据库案例,PHPWAMP多个PHP版本连接SQL Server数据库
2021/04/16 PHP
python数据分析之用sklearn预测糖尿病
2021/04/22 Python
漫改真人电影「萌系男友是燃燃的橘色」公开先导视觉图
2022/03/21 日漫
ECharts transform数据转换和dataZoom在项目中使用
2022/12/24 Javascript