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. ...
随机推荐
- select下拉框左右变换
效果图: 使用jQuery插件---multiselect2side做法: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 ...
- 第45章:MongoDB-集群--Sharding(分片)--分片的管理
①列出所有的Shard db.runCommand({“listshards”:1}); ②查看分片信息 db.printShardingStatus(); ③判断是否分片 db.runCommand ...
- SVN服务端和客户端的说明与操作
版权声明:本文为博主原创文章,转载请注明原文出处. https://blog.csdn.net/zzfenglin/article/details/50936888 本节我们进一步了解SVN服务端和客 ...
- idea实现自动sql-generator的使用
1.实现步骤: 9.1 加载插件 <!-- mybatis逆向工程jar包 --> <dependency> <groupId>org.mybatis.gener ...
- numpy&matplotlib读书笔记
Matplotlib matplotlib是Python优秀的数据可视化第三方库 matplotlib库的效果可参考 http://matplotlib.org/gallery.html matplo ...
- 【转载】sql monitor
来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/27067062/viewspace-2129635/ SQL Monitor Report 1. SQL Monit ...
- Java并发编程实战
代码中比较容易出现bug的场景: 不一致的同步,直接调用Thread.run,未被释放的锁,空的同步块,双重检查加锁,在构造函数中启动一个线程,notify或notifyAll通知错误,Object. ...
- 从零开始单排学设计模式「策略模式」黑铁 II
阅读本文大概需要 1.7 分钟. 本篇是设计模式系列的第三篇,虽然之前也写过相应的文章,但是因为种种原因后来断掉了,而且发现之前写的内容也很渣,不够系统.所以现在打算重写,加上距离现在也有一段时间了, ...
- laravel migrate时报错:Syntax error or access violation: 1071 Specified key was too long; max key length is 767 bytes
今天在学习laravel的路由模型绑定时,在按照文档执行php artisan migrate时报错. In Connection.php line 664: SQLSTATE[42000]: Syn ...
- OAuth2简易实战(三)-JWT
1. OAuth2简易实战(三)-JWT 1.1. 与OAuth2授权码模式差别 授权服务器代码修改 @Configuration @EnableAuthorizationServer public ...