vue-cli axios跨域 + 反向代理模拟http请求host+referer
axios跨域
配置config->index.js中的proxyTable,内容如下:
proxyTable: { // 跨域请求
'/api': { // 注意此处可设置为 '*' 代表不限制于某个接口,target下的所有接口都可以访问
target:'http://www.webdomain.com', // 你请求的第三方接口
changeOrigin:true, // 在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
pathRewrite:{ // 路径重写, '/api' 改为 '*'后此处要删除
'^/api': '/api' // 替换target中的请求地址,也就是说以后你在请求 http://www.webdomain.com/dataxxx 这个地址的时候直接写成/api即可。
}
}
},
单个数据请求 - 反向代理模拟HTTP请求 host + referer
一、webpack v3.6.0之前
故如果想拿到该接口数据可以进行伪造访问来路,不过这是一种欺骗服务器的手段,笔者并不提倡,仅供学习参考!
在老一点版本的vue2.0 配置下,build目录下有提供了dev-server 和 dev-client的配置,仿造refer配置如下:
build -> dev-server.js 引入相关依赖
var app = express()
var apiRoutes = express.Router()
在指定位置配置代理接口
var apiRoutes = express.Router() /**
* @parameter '/getDataList' 本地代理接口,也就是说以后你在请求
* http://www.webdomain.com/dataxxx 这个地址的时候直接写成/getDataList即可
*
* */
apiRoutes.get('/getDataList', function (req, res) {
var url = 'http://www.webdomain.cn/apidata' // 请求的数据接口
axios.get(url, {
headers: {
referer: 'http://www.webdomain.cn',
host: 'www.webdomain.cn'
},
params: req.query
}).then((response) => {
res.json(response.data)
}).catch((e) => {
console.log(e)
})
})
二、webpack v3.6.0之后
webpack升级到了v3.6.0,里边去掉了dev-server和dev-client两个文件。 现在再对接口的设置不能再在dev-server配置了,而改在webpack.dev.conf.js里进行配置。该接口配置如下:
build > webpack.dev.conf.js 引入相关依赖
var express = require('express')
var axios = require('axios')
var app = express()
var apiRoutes = express.Router()
app.use('/api', apiRoutes);
在指定位置配置代理接口
devServer: {
before(apiRoutes){ // 添加before
apiRoutes.get('/getDataList',(req,res)=>{
let url = 'http://www.webdomain.cn/apidata'
axios.get(url, {
headers: {
referer: 'http://www.webdomain.cn/',
host: 'www.webdomain'
},
params: req.query //这是请求的query
}).then((response) => {
//response是api地址返回的,数据在data里。
res.json(response.data)
}).catch((e) => {
console.log(e);
})
});
},
},
调用代理接口
/* 获取用户session数据 */
export function getUserSession () {
const url = `${WEB_DOMAIN}/users/info`
const datas = Object.assign({}, {}) return axios.get(url, {
params: datas
}).then(res => {
return Promise.resolve(res, datas)
})
}
注意:第二种方法想实现多个接口跨域访问就要配置多个 apiRouters.get() 方法,第一种可以把 '/api' 改为 '*' 代表可以访问 target域名下的所有Api
vue-cli axios跨域 + 反向代理模拟http请求host+referer的更多相关文章
- Vue用axios跨域访问数据
Vue用axios跨域访问数据axios是vue-resource的替代品,vue-resource不再维护.安装axios:npm install axios使用vue-cli开发时,由于项目本身启 ...
- $Django 前后端之 跨域问题(同源策略) vue项目(axios跨域请求数据)
1 跨域问题(多个域之间的数据访问) #同源策略(ip port 协议全部相同) #本站的只能请求本站域名的数据 #CORS实现(跨域资源共享) #实现CORS通信的关键是服务器.只要服务器实现了CO ...
- vue cli 解决跨域 线上 nginx 反向代理配置
前后分离 axios 接 api 跨域问题如图: 解决办法: 1. npm start 本地开发环境解决: 在webpack配置文件 /config/index.js 里找到 proxyTable 开 ...
- vue 解决axios 跨域问题
闲着没事,假期敲vue 请求数据,总结下vue跨越问题 第一种.服务器服务器不支持跨域请求 1.当跨域无法请求的时候我们可以修改工程下config文件夹下的index.js中的dev:{}部分. ...
- vue 跨域配置代理 get/post 请求
1.第一步要有 axios 插件 : npm i axios 首先要在自己的项目手动添加一个文件 vue.config.js 个人理解的为 这是axios 封装的跨域文件. 2.vue.config. ...
- vue 使用axios 跨域请求数据的问题
axios默认是没有jsonp 跨域请求的方法的.一般来说流行的做法是将跨域放在后台来解决,也就是后台开发人员添加跨域头信息. 例如java中的 header,response.setHeader(& ...
- Vue 中 axios 跨域配置 (!!!配置完成需要重新运行,不然也不起作用)
当拿到一个网址如:https://music.163.com/store/api/categorypage/list 获取数据是出现如下: 证明该网址不能非常直观的拿到数据.接下来我们试试跨域拿这个 ...
- axios,vue-echarts, async, vue 图表数据处理; axios 跨域代理; 异步同步请求接口;生命周期函数
1.vue-echarts 安装和组件引用 插件官网 https://github.com/ecomfe/vue-echarts 安装 npm install eacharts vue-echarts ...
- 基于 HTTP 请求拦截,快速解决跨域和代理 Mock
近几年,随着 Web 开发逐渐成熟,前后端分离的架构设计越来越被众多开发者认可,使得前端和后端可以专注各自的职能,降低沟通成本,提高开发效率. 在前后端分离的开发模式下,前端和后端工程师得以并行工作. ...
随机推荐
- 2018年-2019年第二学期第六周C#学习个人总结
在这一周,我学习了5.4抽象类和接口.首先,抽象类当中我知道了C#允许在定义方法时不写方法体,不包含方法体的方法为抽象方法,抽象方法必须使用abstract关键字来修饰例如:abstract void ...
- P4116 Qtree3
思路 可以树剖可以LCT,树剖就是每个重链开一个SET维护一下黑点的深度 非常不优美 使用LCT,在splay上二分找出需要的节点即可 代码 #include <cstdio> #incl ...
- SPOJ 10570 LONGCS - Longest Common Substring
思路 和SPOJ 1812 LCS2 - Longest Common Substring II一个思路,改成多组数据就有三倍经验了 代码 #include <cstdio> #inclu ...
- MyBatis-plus使用
https://blog.csdn.net/qq_32867467/article/details/82944674 官网: https://mp.baomidou.com/guide/optimis ...
- Polly 熔断策略
熔断策略主要以 CircuitBreaker 来完成. 工作原理 熔断器可以被看作为一个主要含有三个状态的状态机 如果以电路开关来看: 开关闭合对应 CLOSED 状态, 开关打开对应 OPEN 状态 ...
- Docker 学习笔记(持久化数据的备份,还原)
假如我们应用程序需要一台 mssql 数据库来持久化数据,我们将 mssql 数据库运行于 Docker 容器中: docker run -d -p 1433:1433 -e "ACCEPT ...
- ssm框架中文请求乱码get
<bean id="utf8Charset" class="java.nio.charset.Charset" factory-method=" ...
- Hadoop之搭建完全分布式运行模式
一.过程分析 1.准备3台客户机(关闭防火墙.修改静态ip.主机名称) 2.安装JDK 3.配置环境变量 4.安装Hadoop 5.配置集群 6.单点启动 7.配置ssh免密登录 8.群起并测试集群 ...
- shell 获得后台进程返回值
获得后台进程返回值我们用“&”把进程放入后台以后,如果需要了解进程的执行情况,可以使用wait函数.默认情况下wait会等待任意子进程结束但是不会返回子进程的返回值.而以子进程的pid作为参数 ...
- 主成分分析(PCA)原理及R语言实现 | dimension reduction降维
如果你的职业定位是数据分析师/计算生物学家,那么不懂PCA.t-SNE的原理就说不过去了吧.跑通软件没什么了不起的,网上那么多教程,copy一下就会.关键是要懂其数学原理,理解算法的假设,适合解决什么 ...