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

背景

我们都知道浏览器有一个既核心也最基本的安全功能,即同源策略。同源分别是:协议,域名,端口。如果浏览器访问服务器不同源的话,就会访问不到数据。那开发中常常访问的服务器不同源,那么可以借助一个服务器当做中介来访问需要访问的服务器从而获得数据。因为同源策略是浏览器的安全机制,而服务器之间是不受此限制的。之前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)

})

}

请求到数据如下:

fcd38bece315f93ac725c6ad2cfc8a0c.png

ea68475eff538f413bca7b492c17aabd.png

结语

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/528287.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

cairosvg在linux中的安装_直接用ISO文件在linux上安装新系统

Use Case-When you don’t have CD / DVD drive on your system.-You have Fedora DVD but your system has only a CD Drive.-You don’t want to waste time and resources in burning iso on optical media.Pre-requisites-You have a Fedora DVD iso or rescue cd iso.-You…

客户机服务器中的操作系统有哪些,操作系统中中间件的分类都有哪些呢?

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼中间件是指系统软件和用户应用软件之间连接的软件,以便于软件各部件之间的沟通,特别是应用软件对于系统软件的集中的逻辑,是一种独立的系统软件或服务程序,分布式应用软件借助这种软件…

python函数后面两个括号_简单了解为什么python函数后有多个括号

这篇文章主要介绍了简单了解为什么python函数后有多个括号,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下一般而言,函数后面只有一个括号。如果看见括号后还有一个括号,说明第一个函数返…

一个账号可以登录几台机器_干货:一个PubMed账号可以有这么多用处!

且不说撰写一个综述类文章,就连平时的课题设计和汇报,都是动辄几十篇文献以上,那么,该如何管理这么多文献呢?笔者认为,一个PubMed账号足矣。我们都知道,在生物医药领域,PubMed这个文…

vuex 源码分析_前端入门之(vuex-router-sync解析)

前端入门之(vuex-router-sync解析)发布时间:2018-11-14 13:31,浏览次数:513, 标签:vuexroutersync前言:vue全家桶的内容我们已经研究过了vuex、vue-router,有兴趣的童鞋可以去看看我之前的两个系列的文章vuex源码解析一、vue-router全解析一,…

linux tomcat守护_linux-非root用户运行tomcat(示例代码)

# 前言:为什么要使用非root用户运行tomcatroot用户启动tomcat有一个严重的问题,那就是tomcat具有root权限。这意味着你的任何一个页面脚本(html/js)都具有root权限,所以可以轻易地用页面脚本 修改整个硬盘里的文件!所以最好不要使…

docker 拉取oracle_Docker 拉取 oracle 11g镜像配置-Go语言中文社区

话不多说开始记录docker拉取阿里的oracle11g 镜像并进行配置,用pl/sql 可以登录为最终结果navicat连接是在最后一步但是根据这个进行配置会有一些问题,所以写这篇记录一下,希望可以帮助其他人开始:①、开始拉取镜像-执行命令&…

投票选举 算法_区块链主流共识算法一文全通

在每种伟大的加密货币背后,都有着一个伟大的共识算法。没有共识算法是完美的,但是它们各有千秋。在加密世界中,需要共识算法来防止重支付。这是迄今为止一些最流行的共识算法的简要介绍,从区块链到DAG以及介于两者之间的所有内容。…

clion 引用dll_用CLion实现本地方法并给java调用

众所周知,PHP是世界上最好的语言,java排第二,因为PHP无所不能。但是在某些场景下java还要调用本地方法来提高执行的效率,故java只能排第二。java提供了jni(Java Native Interface)来实现在java中调用本地方法。本地方法在java中用…

mysql没有创建数据库的权限设置_mysql 创建数据库,用户并给用户设置权限

mysql创建数据create database dataBaseName default charset utf8 collate utf8_general_ci; --创建数据库并设置字符集创建用户create user 用户名% identified by 密码; -- ‘%‘ 是该用户可以在任何机器上登录查询用户select user,host.password from mysql.user;给用户设置…

mysql 自定义序列号_在mysql中怎样设置,才能自动添加序列号

事件发生的线程ID(THREAD_ID)活动名称(EVENT_NAME)起止时间戳以及事件的总持续时间(TIMER_START,TIMER_END 和 TIMER_WAIT)在事件停止之前完成的工作单位和预估工作单位(WORK_COMPLETED,WORK_ESTIMATED)因此,当自动重新加入过程开始时&#x…

golang mysql封装_自己封装的golang 操作数据库方法

这个是我用Go写的第一个东东,可能还存在些BUG没有测试到。这里主要是提供一个参考。各位可以改写成自己的风格。在命令行下输入如下两条命令,进行安装go get github.com/male110/SimpleDbgo install github.com/male110/SimpleDbGo语言的数据库操作&…

mysql历史数据备份_Mysql存储过程历史表备份

原文:Mysql存储过程历史表备份应用背景SCADA采集系统需要将实时数据存入历史表。问题1:如何更简单的添加历史数据?2.海量历史数据,比如年数据,如何快速筛选 画曲线?利用mysql的事件,每小时存一次采集数据&a…

如何用js给图片重置宽_如何用js给老婆每天发情话

作者: 加百利真胖原文:https://juejin.cn/events/all一、引言最近家里添了小孩,在家带娃陪产了一些天,深刻体会到老婆带孩子的辛苦。工作的时候不能在家陪她,就想着写个程序,每天固定在固定时间给她发一些情话,好让她在…

世界手机号码格式_世界上手机号码最长的国家是中国,最短的是哪个国家?

现在手机普及率非常之高,基本上人手至少一个手机,那么哪个国家的手机号码最长呢?其实世界上最长的电话号码,是11位数的中国手机号码。为什么手机号码是11位呢?1、号码格式决定我们的手机号可以分为三段,都有…

dockers log查询dockers的文件_Tomcat PUT方法任意文件上传

漏洞背景:tomcat(7.0.0-7.8.1)服务器,开启了HTTP PUT请求方法,web.xml文件中的readonly值设置未false漏洞环境:使用vulhub环境,直接dockers安装安装成功:安装vulhub详见:https://vulhub.org/#/index/漏洞利…

vue替换全部符合’字符串_技术成长日记-Vim实用技巧-4.7查找替换

1. 普通查找/ 向下查找? 向上查找n 查找下一个目标字符串N 查找上一个目标字符串q/ 回溯查找历史,输入该命令后会在状态栏上方显示一个查找历史回溯窗口,如图4.1: 图4.1 回溯查找历史可以选择之前执行过的查找,也可以在最后一行回…

bex5 mysql_bex5 库存系统的增删改查等功能对MYSQL数据库的维护操作 Windows Develop 276万源代码下载- www.pudn.com...

文件名称: bex5下载 收藏√ [5 4 3 2 1 ]开发工具: Java文件大小: 99 KB上传时间: 2017-05-18下载次数: 0提 供 者: 张天详细说明:库存系统的增删改查等功能对MYSQL数据库的维护操作- U5E93 u5B58 u7CFB u7EDF文件列表(点击判断是否您需要的文件,如…

第二百二十六回

文章目录 1. 概念介绍2. 具体细节2.1 发现服务2.2 发现特征值2.3 发送数据2.4 接收数据 3. 代码与效果3.13.2 运行效果 4. 经验总结 我们在上一章回中介绍了"连接蓝牙设备的细节"相关的内容,本章回中将介绍通过蓝牙发送数据的细节.闲话休提,让…

excel导入mysql 截断_解决Excel导入数据库时出现的文本截断问题

问题在把Excel导入到数据库中时,发生文本截断问题:即导入的数据每行只有一部分,原始的Excel数据为:忽略错误导入SQLServer2008过程中,如果源数据和目标数据类型不匹配会导入失败,所以导入数据时会忽略错误&…