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 程序最初的目的就是将信息(数据)放到公共的服务器,让所有网络用户都可以通过浏览器访问. 在次之前,我们可以通过以下几种方式让浏览器发出对服务端的请求,获取服务端的数据: 地 ...
随机推荐
- GIT 数据结构
Git doesn’t think of or store its data this way. Instead, Git thinks of its data more like a series ...
- javascript获取时间戳
时间戳: 时间戳是自 1970 年 1 月 1 日(00:00:00 GMT)以来的秒数.它也被称为 Unix 时间戳(Unix Timestamp). JavaScript 获取当前时间戳: < ...
- spark操作Kudu之读 - 使用DataFrame API
虽然我们可以通过上面显示的KuduContext执行大量操作,但我们还可以直接从默认数据源本身调用读/写API. 要设置读取,我们需要为Kudu表指定选项,命名我们要读取的表以及为表提供服务的Kudu ...
- lvs介绍
1Linux集群及系统扩展的方式概述 集群是有多台服务器组织在一起,一起工作,因为单台服务器的并发响应能力是有限的,响应处理能力也是有限的所有有了集群的出现 在系统扩展有2种方法: 1 向上扩展:是指 ...
- 033 Url中特殊字符的处理
在url跳转页面的时候,参数值中的#不见了,一直没有处理,今天有空看了一下,后来发现后台的过滤器之类的都没有处理,就比较奇怪了,原来是特殊字符的问题. 一:Url中的特殊字符 1.说明 这里还是需要做 ...
- 052 kafka对topic的增删改查操作
一:create 1.开始使用命令 2.创建 bin/kafka-topics.sh --create --topic beifeng --zookeeper linux-hadoop01.ibeif ...
- PAT (Basic Level) Practise - 换个格式输出整数
题目链接:https://www.patest.cn/contests/pat-b-practise/1006 1006. 换个格式输出整数 (15) 时间限制 400 ms 内存限制 65536 k ...
- radio按钮单选效果
必须有name,并且是同一值,判断效果可用value值确定
- Kosaraju与Tarjan(图的强连通分量)
Kosaraju 这个算法是用来求解图的强连通分量的,这个是图论的一些知识,前段时间没有学,这几天在补坑... 强连通分量: 有向图中,尽可能多的若干顶点组成的子图中,这些顶点都是相互可到达的,则这些 ...
- AE视频制作 参考 资源 科幻科技风格 开场 公司企业宣传
== 人类已经堕落,机器军团大举入侵,开始抹除人类,净化地球!-原创-高清正版视频在线观看–爱奇艺 这个视频片头不错.展示效果和音乐. == 外星人入侵地球,只为收集人类大脑!速看科幻电影<天际 ...