前端vue框架的跨域处理方法
一、jsonp跨域 npm install jsonp
然后创建一个jsonp.js 来使用jsonp import oringinJSONP from 'jsonp'
export default function jsonp(url, data, option) { url += (url.indexOf('?') < 0 ? '?' : '&') + param(data) //返回一个promise对象 return new Promise((resolve, reject) => { //resolve成功 reject失败 oringinJSONP( url, option, (err, data) => { if( !err ) { resolve(data); } else { reject(err) } }) }) }
function param( data ) { //拼接参数 let url = ''; for( var k in data) { let value = data[k] !== undefined ? data[k] : ''; url += &${k}=${encodeURIComponent(value)}
} return url ? url.substring(1) : '' }
然后,创建一个方法使用上面的jsonp()
import jsonp from 'common/js/jsonp' import {commonParams, options} from './config' export function getRecommend() { //暴露一个方法 让人调用 const url = 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg' //Object.assign()合并对象键和值 const data = Object.assign( {}, commonParams, { uin:0, platform:'h5', needNewCode:1 }) return jsonp(url, data, options) } 最后使用 import { getRecommend, songsList } from 'api/recommend'; getRecommend().then( (res) => { if(res.code === ERR_OK) { this.recommonds = res.data.slider; } });
二、使用axios进行跨域处理 在dev-server.js中, const app = express()
var axios = require('axios') //引入axios var apiRoutes = express.Router()
apiRoutes.get('/songsList', function( req, res ) { var url = "https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg"; axios.get(url, { headers: { referer: 'https://m.y.qq.com/', host: 'c.y.qq.com' }, params: req.query }).then( (response) => { res.json(response.data) }).catch( (e) => { console.log(e); }) });
app.use('/api', apiRoutes);
然后在目标js中 function songsList() { const url = '/api/songsList' const data = Object.assign( {}, commonParams, { uin:0, platform:'h5', needNewCode:1, format: 'json' }) return axios.get(url, { params: data }).then((res) => { return Promise.resolve(res.data) }) } 然后执行songsList(),这种类似与欺诈的方法修改了请求头的host 和 referer,这样可以绕过同源策略的检测,进而达到跨域获取数据的效果。
前端vue框架的跨域处理方法相关推荐
- vue 引入pdf跨域问题怎么解决_VUE项目中的跨域问题
[摘要]跨域问题是前端开发人员比较常见的问题, 那么跨域出现的原因, 该如何解决跨域, VUE中对跨域又是怎样处理的呢 [作者]田鋆鹏 一. 前端为什么会出现跨域问题? 跨域问题是浏览器同源策略限制, ...
- Vue2前端请求API数据跨域问题解决
Vue2前端请求API数据跨域问题解决方法 前端:Vue2 接口使用:API 问题报错提示: Access to XMLHttpRequest at 'http://localhost:9090/ec ...
- vue跨域问题解决方法
vue跨域解决方法 vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报"No 'Access-Control-Allow-Origin' ...
- vue php axios 跨域,在vue项目中,使用axios跨域处理
下面我就为大家分享一篇在vue项目中,使用axios跨域处理,具有很好的参考价值,希望对大家有所帮助. 跨域,一个很是让人尴尬的问题,有些人可以在后台中设置请求头,但是很多前端并不具备后台的知识,并无 ...
- vue开发环境跨域与生产环境跨域
常见的跨域的方式 同源策略 所谓同源(即指在同一个域)具有以下三个相同点 协议相同(protocol) 主机相同(host) 端口相同(port) jsonp JSONP的原型:创建一个回调函数,然后 ...
- 解决Vue前后端跨域问题的多种方式
1 前言 本文主要介绍借助解决Vue前后端跨域问题的几种方式 说到ajax请求,就不得不说下xhr(XMLHttpRequest)了,它可以说是鼻祖,但是实际开发中,我们不会直接使用它,而是进行二次封 ...
- 什么是跨域 解决跨域的方法 (分分钟)
一 ,为什么会出现跨域问题 处于浏览器的同原则策略(Sameoriginpolicy)是一种约定,它是浏览器最核心 也是基本的安全共功能,如果缺少了同源策略,则浏览器的正常功能可能会 收到影响.可以说 ...
- React项目中请求跨域解决方法
React项目中请求跨域解决方法 今天经理给我了一个React项目地址,让我拉下来并跑起来,拉下来运行起来后,发现所有的请求都失败了,并且都是由于跨域问题导致的.花了点时间,解决了这个问题,在这里记录 ...
- Vue中的跨域解决方案
前言 跨域是因为浏览器存在对不同源页面数据接收的限制.这种限制就是浏览器的同源策略. 同源策略是浏览器的安全机制,跨域的原理就是通过各种方式避开浏览器的安全机制 使用 在项目开发时,对跨域的概念仅限于 ...
最新文章
- 20155319 2016-2017-2 《Java程序设计》第七周学习总结
- python中nltk_python2.7和NLTK安装详细教程
- 网络安全比赛理论答题(一)
- yii2实战教程之第一个Yii程序
- 微服务设计模式(上)
- pandas隔行计算均值方差(相邻行或隔行的均值/方差)
- c语言中sizeof是一个标准库函数,对C语言中的sizeof的介绍分析
- linux contos7防火墙加端口,Linux:centos7防火墙开放端口
- svn拉取文件合并_svn - SVN - 大象笔记
- Linux管理用户组的安装
- 如何打开java jar文件怎么打开方式_Win10系统下jar文件如何打开?
- Java开发规范之常量定义篇
- 2022年证券从业资格证券投资基金考试多选题专练及答案
- jstl fn 函数
- Qt widget事件传递顺序以及监听特定控件是否接收某个事件
- 期末了,用Python写个自动批改作业系统
- 什么是饥饿营销,饥饿营销案例以及饥饿营销的4个步骤
- EasyNVR H5无插件摄像机直播解决方案前端解析之:关于直播页面和视频列表页面切换的问题
- (dfs/dp)P2327 [SCOI2005]扫雷
- EAI激光雷达X4使用gmapping与laser_scan_matcher建图(二)
热门文章
- boost::gil::extend_boundary用法的测试程序
- GDCM:VRDS的测试程序
- Boost:使用find_if()算法来检测两个向量交叉的点
- Boost:使用accumulator_set <>和std :: for_each()计算一些有用的统计信息
- ITK:计算曲率各向异性扩散
- DCMTK:测试ConcatenationCreator类
- OpenCV在图像中寻找轮廓
- C语言求一棵二叉树所有根到叶的路径(附完整源码)
- OpenGL次表面散射
- OpenGL延迟着色之三