fetch实现vue跨域问题

最新推荐文章于 2025-09-30 01:55:58 发布

原创最新推荐文章于 2025-09-30 01:55:58 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #vue

本文深入解析Fetch API的使用方法，包括基本调用、处理响应及错误回调。同时，对比了POST请求中三种关键的content-type：application/json、application/x-www-form-urlencoded和multipart/form-data，阐述了它们的应用场景与编码特性。

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

第一个参数是URL
第二个参数是可选参数 (data headers)

使用了 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)

在这里插入图片描述