fetch实现vue跨域问题

fetch 请求数据
fetch 抓取数据 不需要引入 直接调用

  1. 第一个参数是URL

  2. 第二个参数是可选参数 (data headers)

  3. 使用了 JavaScript Promises 来处理结果/回调:(then 成功的回调 ) (catch 失败的回调 )
    var p = new Promise(function(resolve,reject){ }); p.then(result=>{}).catch(err=>{})

    fetch 写法 固定
    fetch(url,options)        .then(res=>res.json())   // 转为json 格式        .then(result=>result)    // 成功的回调        .catch(err=>err)
    POST 提交三种比较重要的 content-type         
    1    'Content-Type': 'application/json'   服务端消息主体是序列化的JSON字符串  除IE 外都支持        
     2    'Content-Type': 'application/x-www-form-urlencoded'   发送到服务器之前,所有字符都会进行编码        提交的数据按照 key1=val1&key2=val2 的方式进行编码,key 和 value 都进行了 URL 转码   querystring.stringify         var obj = {username:"zkl"}  username=zkl        
     3    'Content-Type': 'multipart/form-data'       不对字符编码。在使用包含文件上传控件的表单时,必须使用该值     
     ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200829164250392.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h4XzUyODA=,size_16,color_FFFFFF,t_70#pic_center)
    

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue是一款非常流行的JavaScript框架,而Axios是一个基于Promise的HTTP客户端工具库。然而,在使用Vue和Axios时,我们可能会遇到跨域问题。当我们从一个域名发送HTTP请求到另一个域名时,由于浏览器的同源策略限制,会产生跨域问题。Jsonp是一种解决跨域问题的方法之一。 Jsonp全称为JSON with Padding,它通过在前端创建一个script标签,并设置其src属性为包含回调函数的URL,来实现跨域请求。服务器在收到请求后,将返回一个JavaScript函数调用,并将数据作为参数传入该函数中。这样,前端页面就可以通过定义该回调函数,获取到服务器返回的数据。 在Vue中使用Axios发送Jsonp请求,可以通过设置Axios的`params`选项来实现。具体步骤如下: 1. 首先,在Vue项目中安装Axios库:`npm install axios` 2. 然后在Vue组件中引入Axios:`import axios from 'axios'` 3. 创建一个方法来发送Jsonp请求: ```javascript methods: { fetchData() { axios({ method: 'jsonp', url: 'http://example.com/api', params: { callback: 'jsonpCallback', // 回调函数名 } }) .then(response => { console.log(response.data); // 获取到服务器返回的数据 }) .catch(error => { console.log(error); }); } } ``` 4. 在上述代码中,通过设置`params`属性将回调函数名传递给服务器。服务器在返回数据时,会将回调函数名拼接到返回数据的尾部。 5. 最后,在模板或其他地方调用该方法,即可发送Jsonp请求来获取跨域数据。 需要注意的是,由于Jsonp使用`<script>`标签加载数据,因此只能发送GET请求。同时,为了保证安全性,我们需要对返回的数据进行校验和过滤,以防止恶意注入脚本。 以上就是通过Vue和Axios发送Jsonp请求来解决跨域问题的方法。希望这能对你有所帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值