新版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 个人笔记(没有整理,很乱)
Jul 07 Javascript
用js遍历 table的脚本
Jul 23 Javascript
我的javascript 函数链之演变
Apr 07 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
Jul 29 Javascript
详谈javascript中DOM的基本属性
Feb 26 Javascript
最简单的JavaScript图片轮播代码(两种方法)
Dec 18 Javascript
vue中的router-view组件的使用教程
Oct 23 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
May 29 Javascript
JS中实现浅拷贝和深拷贝的代码详解
Jun 05 Javascript
微信小程序位置授权处理方法
Jun 13 Javascript
JavaScript arguments.callee作用及替换方案详解
Sep 02 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
Sep 11 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中的注释、变量、数组、常量、函数应用介绍
2012/11/16 PHP
Linux Apache PHP Oracle 安装配置(具体操作步骤)
2013/06/17 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
解决PHPstudy Apache无法启动的问题【亲测有效】
2020/10/30 PHP
Javascript之文件操作
2007/03/07 Javascript
离开页面时检测表单元素是否被修改,提示保存的js代码
2010/08/25 Javascript
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
2010/12/06 Javascript
js中巧用cssText属性批量操作样式
2011/03/13 Javascript
jQuery操作 input type=checkbox的实现代码
2012/06/14 Javascript
javascript对下拉列表框(select)的操作实例讲解
2013/11/29 Javascript
javascript 终止函数执行操作
2014/02/14 Javascript
javascript事件冒泡简单示例
2016/06/20 Javascript
浅谈JavaScript的函数及作用域
2016/12/30 Javascript
JavaScript中的编码和解码函数
2017/02/15 Javascript
浅谈angularJS2中的界面跳转方法
2018/08/31 Javascript
vue滚动tab跟随切换效果
2020/06/29 Javascript
在python的类中动态添加属性与生成对象
2016/09/17 Python
python使用pil库实现图片合成实例代码
2018/01/20 Python
python 限制函数执行时间,自己实现timeout的实例
2019/01/12 Python
python游戏地图最短路径求解
2019/01/16 Python
python实现批量注册网站用户的示例
2019/02/22 Python
浅析Python 中几种字符串格式化方法及其比较
2019/07/02 Python
Numpy中对向量、矩阵的使用详解
2019/10/29 Python
python编程进阶之类和对象用法实例分析
2020/02/21 Python
html5写一个BUI折叠菜单插件的实现方法
2019/09/11 HTML / CSS
html5 拖拽及用 js 实现拖拽功能的示例代码
2020/10/23 HTML / CSS
高中班长自我鉴定
2013/12/20 职场文书
建筑文秘专业个人求职信范文
2013/12/28 职场文书
大学生职业生涯规划方案
2014/01/03 职场文书
女方婚礼新郎答谢词
2014/01/11 职场文书
五年级英语教学反思
2014/01/31 职场文书
数学高效课堂实施方案
2014/03/29 职场文书
2014年大学教师工作总结
2014/12/02 职场文书
教师节老师寄语
2015/05/28 职场文书
八年级作文之友情
2019/11/25 职场文书