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. ...
随机推荐
- CODEFORCES ROUND #740 ANALYSES BY TEAM:RED & BLACK
A.Alyona and copybooks Problems: 给你一个数n和代价分别为a, b, c.数量不限的1, 2, 3,求将n凑成4的倍数的最小代价 Analysis: cj:取个模随便凑 ...
- Linux编程基础——GDB(设置断点)
启动GDB后,首先就是要设置断点,程序中断后才能调试.在gdb中,断点通常有三种形式: 断点(BreakPoint): 在代码的指定位置中断,这个是我们用得最多的一种.设置断点的命令是break,它通 ...
- vuex的getters处理数据
getters是用来处理state里的数据的 getters传递一个值state 例子: store.js import Vue from 'vue' import Vuex from 'vuex' ...
- spring InitializingBean和DisposableBean init-method 和destroy-method @PostConstruct @PreDestroy
对于初始化函数: @PostConstruct 注解的方法 InitializingBean接口定义的回调afterPropertiesSet() Bean配置中自定义的初始化函数 对于析构则与上相同 ...
- Elasticsearch System Call Filters Failed to Install
Elasticsearch starts to run, error occurs: : system call filters failed to install; check the logs a ...
- mysql中加入海量数据
delimiter // create procedure m() begin declare num int; set num=1; while num < 100000 insert int ...
- lightoj 1074
这题怎么说呢,负环上的点都不行 网上也有很多解法 我用dfs的spfa解的 我发现网上别人的代码都是用bfs的spfa写的,我就用的dfs的,快了好多 代码还看的别人的,只有中间的spfa是自己写的 ...
- linux中iptables配置文件及命令详解
转自:https://www.cnblogs.com/itxiongwei/p/5871075.html iptables配置文件 直接改iptables配置就可以了:vim /etc/sysconf ...
- python 学习之路【目录】
目录: python--常用函数
- PMP:11.项目采购管理
项目采购管理包括从项目团队外部采购或获取所需产品.服务或成果的各个过程. 项目采购管理包括编制和管理协议所需的管理和控制过程,例如,合同.订购单.协议备忘录 (MOA),或服务水平协议 (SLA). ...