vue-08-axios-get-post-跨域
1, 安装
cnpm install axios --save
2, 在main.js中引入
import Axios from 'axios'
// 挂在在Vue上
Vue.prototype.$axios=Axios;
3, get请求:
<script>
export default {
name: 'HelloWorld',
data() {
return {
newsData: []
}
},
// 组件创建时执行
created() {
// 直接参数方式
this.$axios("http://www.wwtliu.com/sxtstu/news/juhenews.php?type=junshi&count=30")
.then(res => {
console.log(res);
})
.catch(err => {
console.log(err)
}); // 间接参数方式:
this.$axios("http://www.wwtliu.com/sxtstu/news/juhenews.php", {
params: {
type: 'junshi',
count:
}
}).then(res => {
this.newsData = res.data.result.data
console.log(this.newsData)
}).catch(err => {
console.log(err)
}) }
}
</script>
页面渲染
<div class="hello"> <div>
<ul>
<div>
<li v-for="news in newsData">
<img :src="news.thumbnail_pic_s" alt="">
<p> {{ news.title }}</p>
</li>
</div>
</ul>
</div> </div>
4, post 请求:
1), axios 接受的post请求参数的格式 是 form-data 格式
?name=iwen&passwd=1234
2), x-from-urlencoded:
{name: "iwen", passwd: "abc"}
使用第三方库 qs 进行转换
<script> import qs from "qs" export default {
name: "PostRequest",
data() {
return {
postList: []
}
},
create() {
// 引入第三方库, 转变 x-form-urlencoded 格式 为 form 格式
this.$axios.post("www.wwtliu.com/sxtstu/blueberrypai/login.php", qs.stringify({
user_id: "wenbronk",
password: ""
})
).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
}
}
</script>
5, 全局的 axios的默认值
在main.js中进行全局配置
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
// 引入
import Axios from 'axios' Vue.config.productionTip = false // 挂在在Vue上
Vue.prototype.$axios=Axios; // 在之后不需要 写 网址, uri了
Axios.defaults.baseURL = 'https://api.example.com';
// https 认证
Axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// 设置heads, 可以不需要qs设置
Axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; /* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
6, 拦截器:
在 thne 或者 catch 之前, 做拦截处理操作
在main.js中进行拦截
// 添加请求拦截器
Axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
}); // 添加响应拦截器
Axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
进行参数校验或者 后端response校验
7, 跨域解决方案:
在config的 index.js 中添加:
// 处理跨域
proxyTable: {
"/api": {
target: "http://localhost:8080",
changeOrigin: true,
pathRewrite: {
"^/api": ""
}
}
},
然后在main.js中添加host 代理
import Vue from 'vue'
import App from './App'
// 引入
import Axios from 'axios' Vue.config.productionTip = false // 挂在在Vue上
Vue.prototype.$axios=Axios; // 解决跨域:
Vue.prototype.HOST = '/api'
然后 在 post请求中的地址, 改写为
this.HOST + “/login.html”
但只能在测试阶段使用, 正式环境中需要后端解决 !!!!
post 请求可以使用请求拦截器的方式进行拦截
import router from './router'
import Axios from 'axios'
import qs from "qs" Vue.config.productionTip = false // 添加 axios
Vue.prototype.$axios = Axios
Axios.defaults.baseURL = 'https://www.wwtliu.com';
Axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; // 添加 post 请求拦截器
Axios.interceptors.request.use(function (config) {
if (config.method == "post") {
config.data = qs.stringify(config.data)
}
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
}); // 添加响应拦截器
Axios.interceptors.response.use(function (response) { return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
springboot 解决跨域方案:
@Configuration
public class WebConfig extends WebMvcConfigurationSupport { @Bean
public FilterRegistrationBean corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
CorsConfiguration config = new CorsConfiguration();
config.setAllowCredentials(true);
// 设置你要允许的网站域名,如果全允许则设为 *
config.addAllowedOrigin("*");
// 如果要限制 HEADER 或 METHOD 请自行更改
config.addAllowedHeader("*");
config.addAllowedMethod("*");
source.registerCorsConfiguration("/**", config);
FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
// 这个顺序很重要哦,为避免麻烦请设置在最前
bean.setOrder();
return bean;
} }
前端:
import Axios from 'axios'
// Vue.prototype.$axios=Axios;
// 在之后不需要 写 网址, uri了
Vue.prototype.baseURL = 'http://localhost:8000/';
// Axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; const axiosIns = Axios.create({
baseURL: Vue.prototype.baseURL,
timeout: ,
withCredentials: true, // 跨域
headers: {
"Content-Type": "application/x-www-form-urlencoded",
"Access-Control-Allow-Origin": "*",
}
});
Vue.prototype.$axios=axiosIns;
vue-08-axios-get-post-跨域的更多相关文章
- vue下axios和fetch跨域请求
1.在config的index.js下面进行常用跨域配置代码:proxyTable: { '/apis': { //使用"/api"来代替"http://xxxx.cn& ...
- Vue中axios访问 后端跨域问题
public class AllowOriginFilter implements Filter { @SuppressWarnings("unused") public void ...
- 解决Django+Vue前后端分离的跨域问题及关闭csrf验证
前后端分离难免要接触到跨域问题,跨域的相关知识请参:跨域问题,解决之道 在Django和Vue前后端分离的时候也会遇到跨域的问题,因为刚刚接触Django还不太了解,今天花了好长的时间,查阅了 ...
- nginx处理vue打包文件后的跨域问题
起因 在vue文件打包后,项目脱离了vue配置的反向代理配置,还是会报跨域的错误,或者直接打不开本地文件, 但是此刻我们想打开打包后的文件,测试一下文件有没有错误,因为经常会存在开发阶段没有问题,打包 ...
- VUE系列三:实现跨域请求(fetch/axios/proxytable)
1. 在 config/index.js 配置文件中配置proxyTable 'use strict' // Template version: 1.3.1 // see http://vuejs-t ...
- vue 开发和生产的跨域问题
开发阶段 在开发环境与后端调试的时候难免会遇到跨域问题,在 vue 项目中常用的是 proxyTable,这个用起来很方便. 打开 config 文件夹下面的 index.js,找到 dev 开发模式 ...
- Vue+webpack项目中实现跨域的http请求
目前Vue项目中对json数据的请求一般使用两个插件vue-resource和axios, 但vue-resource已经不再维护, 而axios是官方推荐的且npm下载量已经170多万,github ...
- vue配置二级目录&vue-axios跨域办法&谷歌浏览器设置跨域
一.根据官方建议,dist打包的项目文件放在服务器根目录下,但是很多时候,我们并不能这样做,当涉及到二级目录设置多层深埋的时候,就需要在webpack配置文件里去设置一下了. 在webpack.con ...
- vue反向代理(解决跨域)
1,vue中有提供反向代理的接口,就是config/index.js中的proxyTable,我的脚手架版本是2.9.6,proxyTable配置初始为空,如下图. 2,将proxyTable配置如下 ...
- Vue ---- ajax cookies 插件安装 跨域问题 element-ui bootscript 导入
目录 补充: 流式布局样式 Django国际化配置 Django的TODO注释 Vue的ajax插件:axios 安装 配置 如何使用? Vue的cookies插件:cookies 安装: main. ...
随机推荐
- 第四范式涂威威:AutoML技术现状与未来展望
以下内容是对AutoML技术现状与未来展望讲座的总结. 1.机器学习定义 <西瓜书>中的直观定义是:利用经验来改善系统的性能.(这里的经验一般是指数据) Mitchell在<Mach ...
- 作业 -- 几道简单的Python题
1.编写程序,要求生成10240个随机[0,512)之间的整数,并统计每个元素出现的次数. 2.编写程序,要求当用户输入一个列表和两个整数作为下标时,程序可以使用切片获取并输出列表中截取两个下标之间的 ...
- [转]BSD系统正在死亡?一些安全研究人员这样认为
摘要:在代码安全上被关注太少,漏洞没有被报告修补,FreeBSD.OpenBSD和NetBSD还能活下来吗? 在德国莱比齐的34c3网站上,IOActive的渗透测试主管Ilja von Sprund ...
- Java 输入流(一)ByteArrayInputStream
概述 ByteArrayInputStream类是从内存中的字节数组中读取数据,因此它的数据源是一个字节数组.
- 项目小程序笔记-登录界面+FPGA管脚分配文件生成
声明:只是为了记录我遇到的一些问题,其中有我理解错的望勿参考. (1)qt designer设计好窗口 主窗口: 登录窗口: 关于qt designer的使用,大可以百度,很简单的,要注意的是部件的参 ...
- HDFS-HA高可用
HDFS-HA工作机制 通过双NameNode消除单点故障 HDFS-HA工作要点 1.元数据管理方式需要改变 内存中各自保存一份元数据: Edits日志只有Active状态的NameNode节点可以 ...
- Mac再建管理员帐户
在Mac上添加用户没有成功, 把原来的管理员的用户群组修改后, 账户类型成为普通用户. 百度如何重新添加管理员: Mac上修改用户名后,无法用管理员账号和密码登录. 按照超过方法下去, 出现问题: 1 ...
- 【转载】sql monitor
来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/27067062/viewspace-2129635/ SQL Monitor Report 1. SQL Monit ...
- How To Setup a CA
How To Setup a CA Original Version by Ian AldermanUpdated by Zach Miller Introduction You can set up ...
- BeanPostProcessor —— 连接Spring IOC和AOP的桥梁
之前都是从大Boss的视角,来介绍Spring,比如IOC.AOP. 今天换个视角,从一个小喽啰出发,来加深对Spring的理解. 这个小喽啰就是, BeanPostProcessor (下面简称 B ...