Vue（八）发送跨域请求
axios不支持跨域
- 1 安装vue-resource并引入
- 2 基本用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue</title> <script src="https://unpkg.com/vue"></script>
<script src="vue-resource/vue-resource.min.js"></script>
<script> window.onload=function(){
let app = new Vue({
el:'.container',
data:{ },
methods:{
sendJSONP(){
//https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word=a
this.$http.jsonp('https://sug.so.360.cn/suggest',{
params:{
word:'a'
}
}).then(response => {
console.log(response.data);
},response =>{
console.log('请求失败');
})
},
sendJSONP2(){
//https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&json=1&p=3&sid=1443_25549_21113_20930&req=2&csor=1&cb=jQuery110207073365804113201_1515466757822&_=1515466757826
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
params:{
wd:'a'
},
jsonp:'cb' //百度使用的jsonp的参数名为 cb
}).then(response => {
console.log(response.body);
},response => {
console.log('发送失败');
})
}
}
})
} </script> </head> <body> <div class="container">
<!-- 跨域发送请求 -->
<button v-on:click='sendJSONP'>向360搜索发送JSONP请求</button>
<button v-on:click='sendJSONP2'>向baidu搜索发送JSONP请求</button>
</div> </body> </html>
Vue（八）发送跨域请求的更多相关文章
- Vue-cli3.x中使用Axios发送跨域请求的配置方法
Vue-cli3.x中使用Axios发送跨域请求的配置方法 安装axios npm i axios -s main.js中引入 import axios from 'axios' //将axios挂载 ...
- vue实现跨域请求的设置
vue实现跨域请求,需要在vue.config.js里添加以下设置 proxy: { '/service/rest': { target: 'http://localhost:8080/autotab ...
- Vue ajax跨域请求
Vue webpack-dev-server实现跨域请求 思路 配置webpack-dev-server,代理某一个路径到目标路径,同是更改源和重写 Vue里定义一个全部变量:site Vue.pro ...
- 本地Vue项目跨域请求本地Node.js服务器的配置方法
前言:跨域请求是在本地开发时经常遇到的需求,也很简单,只是几句代码配置一下的问题.我初次配置跨域请求时由于官方的说明太简洁,找到的教程又落伍,调试了一番并没有解决问题,到最后解决问题,已花费了很多时间 ...
- 利用 img 和 script 发送跨域请求
利用img.src可以发送http请求,但是发送http请求不是img.src的真正用意. 同样,用script.src去请求jsonp格式的接口数据也不是script元素的最初设计用途. 但是这些歪 ...
- xhr.withCredentials发送跨域请求凭证
一.前言 今天遇到一个坑,浏览器请求数据的时候gg了.浏览器报错如下图: 因为请求头部设置了credentis mode is 'include', 从上面可以看出是Access-Control-Al ...
- vue axios跨域请求，apache服务器设置
问题所在axios请求会发送两次请求 也就是说,它会先使用options去测试,你这个接口是否能够正常通讯,如果不能就不会发送真正的请求过来,如果测试通讯正常,则开始正常请求. 思路: 跨域--> ...
- vue axios跨域请求，代理设置
在config下的index.js中的dev下的 proxyTable{}中设置代理 proxyTable: { '/api': { target: 'http://10.0.100.7:8081', ...
- Ajax和跨域请求
Ajax 一.概述 Web 程序最初的目的就是将信息(数据)放到公共的服务器,让所有网络用户都可以通过浏览器访问. 在次之前,我们可以通过以下几种方式让浏览器发出对服务端的请求,获取服务端的数据: 地 ...
随机推荐
- [转] babel的使用
一.配置文件.babelrc .babelrc 文件存放在项目的根目录下. { "presets": [], "plugins": [] } presets 字 ...
- [转] jQuery的deferred对象详解
jQuery的开发速度很快,几乎每半年一个大版本,每两个月一个小版本. 每个版本都会引入一些新功能.今天我想介绍的,就是从jQuery 1.5.0版本开始引入的一个新功能----deferred对象. ...
- alpha冲刺6/10
目录 摘要 团队部分 个人部分 摘要 队名:小白吃 组长博客:hjj 作业博客:感恩节~ 团队部分 后敬甲(组长) 过去两天完成了哪些任务 文字描述 设计了拍照界面和图片上传界面 沟通了前端进度 接下 ...
- 开源堡垒机Gateone 安装过程记录及报错处理
1.下载git源码或者zip包都可以,下载到我们制定部署目录. git地址:https://github.com/liftoff/GateOne.git 2.检查tornado 版本,安装tornad ...
- mongo 分片
// use ebay // sh.enableSharding("ebay") // db.getCollection("ebay_total_menu_detail_ ...
- 将input或textarea设置为disabled的样式问题
input:disabled{ -webkit-text-fill-color: #333;//是用来做填充色使用的 -webkit-opacity: 1; color: #333; } textar ...
- 使用ycsb对hbase1.4.9 benchmark
Ycsb下载地址:https://github.com/brianfrankcooper/YCSB/releases 目前测试hbase1.4.9,因此下载ycsb-hbase14-binding-0 ...
- get、post的区别
Get.post请求的区别 前言 不论是get还是post方式,都是属于http协议,只是http的两种不同的传输方式,而http协议是基于TCP传输协议的,所以无论是get还是post,在传输层的意 ...
- ibatis 多种传参方式
1,在公司项目yuda遇到的传入in语句,如果直接拼接in语句:in (....),sqlmap中使用#...#输出是不行的. 为需要使用: 第三种:in后面的数据确定,使用string传入 ...
- JavaOO面向对象中的注意点（一）
1.JavaOO宗旨思想: ★万物皆对象,对象因关注而产生★ ☆类是对象的抽取,对象是类的实例☆ 2.JavaOO的三大特征: 封装.继承.多态 (第四大特征 抽象 现还有争议) 3.属性与行为: ...