新版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 png 透明解决方案(推荐)
Aug 21 Javascript
javascript中的缓动效果实现程序
Dec 29 Javascript
深入理解JQuery keyUp和keyDown的区别
Dec 12 Javascript
javascript实现table表格隔行变色的方法
May 13 Javascript
九种原生js动画效果
Nov 11 Javascript
js实现的下拉框二级联动效果
Apr 30 Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
Mar 29 Javascript
详解Vue爬坑之vuex初识
Jun 14 Javascript
JS实现图片放大镜插件详解
Nov 06 Javascript
angularjs 动态从后台获取下拉框的值方法
Aug 13 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
Aug 23 Javascript
Jquery动态列功能完整实例
Aug 30 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
PHP 日期加减的类,很不错
2009/10/10 PHP
实测在class的function中include的文件中非php的global全局环境
2013/07/15 PHP
php操作xml
2013/10/27 PHP
php中get_object_vars()方法用法实例
2015/02/08 PHP
PHP获取数组中单列值的方法
2017/06/10 PHP
PHP sdk文档处理常用代码示例解析
2020/12/09 PHP
传智播客学习之JavaScript基础篇
2009/11/13 Javascript
Javascript读取cookie函数代码
2010/10/16 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
2012/07/20 Javascript
js或者jquery判断图片是否加载完成实现代码
2013/03/20 Javascript
JS将秒换成时分秒实现代码
2013/09/03 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
2013/12/24 Javascript
js 获取input点选按钮的值的方法
2014/04/14 Javascript
Javascript中return的使用与闭包详解
2017/01/11 Javascript
angular实现IM聊天图片发送实例
2017/05/08 Javascript
JavaScript箭头(arrow)函数详解
2017/06/04 Javascript
AngularJS 教程及实例代码
2017/10/23 Javascript
react实现antd线上主题动态切换功能
2019/08/12 Javascript
vue实现整屏滚动切换
2020/06/29 Javascript
vue商城中商品“筛选器”功能的实现代码
2020/07/01 Javascript
Python 2与Python 3版本和编码的对比
2017/02/14 Python
Python使用回溯法子集树模板解决迷宫问题示例
2017/09/01 Python
python requests抓取one推送文字和图片代码实例
2019/11/04 Python
python shutil文件操作工具使用实例分析
2019/12/25 Python
Python偏函数Partial function使用方法实例详解
2020/06/17 Python
安全的后院和健身蹦床:JumpSport
2019/07/15 全球购物
电子信息专业自荐书
2014/02/04 职场文书
记账会计岗位职责
2014/06/16 职场文书
五月的鲜花活动方案
2014/08/21 职场文书
公司周年庆典标语
2014/10/07 职场文书
2014年信用社工作总结
2014/11/25 职场文书
建议书格式
2015/02/04 职场文书
公司员工手册范本
2015/05/14 职场文书
大学学习委员竞选稿
2015/11/20 职场文书
教你如何用python开发一款数字推盘小游戏
2021/04/14 Python
Apache SeaTunnel实现 非CDC数据抽取
2022/05/20 Servers