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. ...
随机推荐
- SVN用法及常见问题分析
SVN中英文对比: 1,今天遇到的新问题,在父节点里面找不到子节点文件夹,在子节点里面可以上传但是却一直上传不上去. 具体原因:子文件夹里面有个.svn文件(打开隐藏的项目可见),是的子文件夹的svn ...
- 采用Google预训bert实现中文NER任务
本博文介绍用Google pre-training的bert(Bidirectional Encoder Representational from Transformers)做中文NER(Name ...
- 2019.03.25 NOIP训练 匹配(match)(贪心)
题意简述: 思路: 直接考虑把人和物品都看成二维平面上面的a,ba,ba,b两类点,然后一个aaa和bbb匹配的条件是xa≤xb&&ya≤ybx_a\le x_b\&\& ...
- PyCharm 安装教程(Windows)
python教程 http://www.runoob.com/python3/python3-basic-syntax.html PyCharm 是一款功能强大的 Python 编辑器,具有跨平台性, ...
- Wpf窗口中打开WinForm窗口
获取wpf窗口对应的句柄窗口 using System; using System.Windows; using System.Windows.Interop; using IWin32Window ...
- python 方法
1.首先运行python交互模式 输入 python 2.定义一个有序的集合 相当于js中的数组它里面有一些增删改查的方法 1. 定义一个数组 >>> ww = ['1','2',' ...
- CentOS 7 nginx 1.8.1安装
OS版本:CentOS 7.2nginx版本:1.8.1所需包:openssl-1.0.2m.tar.gz zlib-1.2.8.tar.gz pcre-8.36.tar.gz nginx-1.8.1 ...
- SVN服务端和客户端的安装与搭建
版权声明:本文为博主原创文章,转载请注明原文出处. https://blog.csdn.net/zzfenglin/article/details/50931462 SVN简介 SVN全名Subver ...
- The META for Mobile terminal
近来想写一些好玩的手机网页,在这里整理了一下在手机端的meta标签,以免下次忘记,再去网上搜. meta指元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描 ...
- input type='file'文件上传自定义样式
使用场景: 在未使用UI库时免不了会用到各种上传文件,那么默认的上传文件样式无法达到项目的要求,因此重写(修改)上传文件样式是必然的,下面的效果是最近项目中自己写的一个效果,写出来做个记录方便以后使用 ...