Fetch API[1] 是一种现代的 JavaScript API，用于进行「网络请求」。它提供了一种更简洁、灵活的方式来发送和接收数据，并取代了传统的 XMLHttpRequest[2]。Fetch API 使用 Promise 对象处理异步操作，使得处理网络请求变得更加直观和易用。
这次问题是从Btools更换获取数据方式开始的，因为B站收藏夹在前台页面返回的数据中删除了失效视频的封面和标题，导致原来的程序无法获取视频信息。
现如今，网站开发普遍采用前后端分离的模式，数据交互成为了不可或缺的关键环节。在这个过程中，XHR 和 Fetch API 是两种最常见的方法，用于从 Web 服务器获取数据。XHR 是一种传统的数据请求方式，而 Fetch API 则代表了现代 Web 开发的新兴标准。接下来，我们将一同深入学习它们的使用方法和适用场景。
只有在满足一定条件的跨域请求中，浏览器才会发送OPTIONS请求（预检请求）。这些请求被称为“非简单请求”。反之，如果一个跨域请求被认为是“简单请求”，那么浏览器将不会发送OPTIONS请求。
其中，源=协议+主机+端口，**两个源相同，称之为同源，两个源不同，称之为跨源或跨域
同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。
在前端写接口请求的时候，遇到了跨域的问题。（在一个项目工程中通过接口请求另一个项目工程中的数据）
（1）在App.vue中使用created方法创建fetch，将域名及方法等创建，如下图
2、将前端content-type设置为application/json，然后通过开发工具的http方式在浏览器打开index.html，或自己重新创建一个服务，在浏览器打开index.html。你会发现其果然请求了两次，分别为OPTIONS请求与POST请求：
这个错误是由于浏览器的跨域资源共享（CORS）策略引起的。网页从一个域名（例如'http://127.0.0.1:8848'）请求另一个域名（例如'http://192.168.16.107:8092'）的资源时，浏览器会阻止这个请求，除非服务器在响应中包含了适当的CORS头信息。
随着前端技术的发展，请求服务器数据的方法早已不局限于ajax、jQuery的ajax方法。各种js库已如雨后春笋一般，蓬勃发展，本文主要想介绍其中的axios和fetch。
跨域问题其实就是浏览器的同源策略所导致的。同源策略是一个重要的安全策略，它用于限制一个 origin 的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。
欢迎来到前端异步交互的世界！在这篇博客中，我们将深入探讨 Ajax（Asynchronous JavaScript and XML），这是一项能够让你的网页在不刷新的情况下与服务器进行数据交互的技术。无论你是刚刚踏入前端开发的小白，还是有一定经验的开发者，相信通过本文的学习，你将对 Ajax 有更深入的理解。
「服务类型（Scheme）」 指明将被使用的协议（Protocol）。「协议」指定数据如何传输以及如何处理请求。当你查看协议时，你就能很好地理解这个 URL 的用途。（例如是带有 SMTP、POP3、IMAP 的电子邮件协议，还是获取和管理 git 仓库的 SSH 请求，或者是针对 Web 的 HTTP 请求。）
前后端分离开发是一种现代化的Web应用开发模式，它将前端（客户端）和后端（服务器端）的开发过程解耦，使团队能够独立进行开发、测试和部署。这种方法有助于提高团队的协作效率、加快开发速度，并支持多平台应用程序的开发。在本文中，我们将深入探讨如何实现前后端分离开发，以及相关的最佳实践。
HTTP(Hypertext Transfer protocol，超文本传输协议) 有一个很重要的特点：
在这个数字化时代，人工智能技术正以惊人的速度改变着我们的生活方式和创造方式。音乐作为一种最直接、最感性的艺术形式，自然也成为了人工智能技术的应用场景之一。今天，我们将以 Vue 和 Node.js 为基础，利用现有的 API 来快速搭建一个 Suno AI 音乐站点。让我们一起探索这个令人兴奋的过程吧！
看起来是跨域问题，也就是只支持 http，https 等这种类型的跨域请求，不支持 file 协议类型的（直接本地打开文件）。解决方案如下：
Cross-origin Resource Sharing 中文名称 “跨域资源共享” 简称 “CORS”，它突破了一个请求在浏览器发出只能在同源的情况下向服务器获取数据的限制。
“ 相信做前端开发的同学对同源策略都比较熟悉，而如何解决跨域问题基本上也是前端面试必考题之一。 ” CORS标准协议 为了解决跨域资源共享问题，浏览器厂商和标准组织在 HTTP 协议的基础上，提出了 CORS 标准协议。CORS 协议由一组 HTTP Header 构成，用于标识某个资源是否可以被跨域访问。 这里只是简单介绍一下 CORS 标准，更详细的内容可以直接看规范文档：Fetch Standard 当前端使用 XHR 或者 fetch 等其他方法请求一个跨域资源时，如果是非简单请求（后面会解释），
前端数据请求方式主要包括XMLHttpRequest、Fetch、Axios、WebSocket等。这些请求方式各有特点，适用于不同的场景。本文将从综合性能、优缺点、最佳使用场景以及使用方式的角度对这些数据请求方式进行分析。
运行在http://localhost:8082端口的前端服务器express和运行在http://localhost:8080端口的后端服务器golang net/http。前端的javaScript代码使用fetch()函数发起一个到http://localhost:8080/api/students的请求。
想了解跨域就要先了解什么是同源策略，就好比你要了解什么苹果手机”越狱“，首先要了解什么是ios操作系统。 了解以下名词：
前言： 本文翻译自 Lydia Hallie[1] 小姐姐写的 ✋?? CS Visualized: CORS[2]，她用了大量的动图去解释 CORS 这个概念，国内还没有人翻译本文，所以我在原文的理
在实际的开发过程当中，因为采用前后端分离的开发模式，所以前端和后端在制定好数据接口以后就会并行开发，而在和后端进行联调的时候往往会出现跨域的问题
写过一篇《互联网安全知多少》，内容主要参考了道哥的白帽子一书，本文来篇实际小案例实战下。
一般浏览器都是第二种方式限制跨域请求，那就是说请求已到达服务器，并有可能对数据库里的数据进行了操作，但是返回的结果被浏览器拦截了，那么我们就获取不到返回结果，这是一次失败的请求，但是可能对数据库里的数据产生了影响。
fetch()是 XMLHttpRequest 的升级版，用于在 JavaScript 脚本里面发出 HTTP 请求。
前端跨域方案很多，jsonp、iframe等等，但是个人觉得，最正宗，最无损的跨域方式还是CORS。 CORS(Cross-origin resource sharing)是一个W3C标准，翻译过来是跨域资源共享。 它允许浏览器向跨域（协议、域名、端口任一不相同）服务器发送XMLHttpRequest请求。 目前支持所有现代浏览器（>IE10） 借阅了阮一峰大神的《跨域资源共享 CORS 详解》，结合自己的理解，说一说自己的CORS的领会。
跨域POST，浏览器会先发送一个OPTIONS预请求，目的是与服务器确认是否允许实际的跨域请求，确认后再发实际POST请求。
Cookie 用于在客户端存储会话信息。它通过服务器响应请求时，响应头的Set-Cookie字段来设置 Cookie。Cookie 是服务端生成，保存在客户端
准确的说，同源策略是指，浏览器内部在发起如下请求时，该来源必须是当前同源的HTTP资源：
基础的东西总是很少人看，写起来也特别痛苦。不是因为它简单——恰恰是因为它太晦涩，太基础了——以至于没有人乐意用它来充实自己（装逼）。
运行在http://localhost:8082端口的前端服务器express和运行在http://localhost:8080端口的后端服务器golang net/http。前端的javaScript代码使用fetch()函数发起一个到http://localhost:8080/api/students的请求。
如果你在开发网站时曾经尝试通过框架或是浏览器的 fetch、XHR 请求过外部 API 的话，那么一定遇到过跨域请求，还有那个触目惊心的 CORS 错误信息；今天咱们来讨论跨域问题的原因以及解决方法。
作为前端开发人员，你要是连同源策略都不知道是什么，那就太说不过去了。本篇文章将讲述同源策略的定义， 以及当我们需要克服同源策略，如何进行跨域访问数据的方法。
最近做一个玩的东西需要用到天气API，便从今天头条首页抓了一个想自己用。https://www.toutiao.com/stream/widget/local_weather/data/，可当我高高兴兴的引入JQuery并打算发起请求
CORS(Cross-origin resource sharing) 中文名称"跨域资源共享"，由于安全原因，Web 应用程序默认情况只能在同源(协议、域名和端口)的情况下向服务器获取数据。
本文主要记录一次静态资源服务源站更新了跨域策略后，引发的客户端跨域请求失败的案例。
ajax只能请求同一个域下的数据或资源，有时候需要跨域请求数据，就需要用到jsonp技术，jsonp可以跨域请求数据，它的原理主要是利用了<script>标签可以跨域链接资源的特性。jsonp和ajax原理完全不一样，不过jquery将它们封装成同一个函数。
文章出自https://www.jianshu.com/p/d771bbc61dab
出于安全原因，浏览器会限制脚本发起的跨域 HTTP 请求，除非服务器同意访问。譬如服务器对预检请求的响应 Header 中有 Access-Control-Allow-Origin: *，那么跨域请求即可正确访问。
跨域资源共享(CORS) 是一种机制，它使用额外的 HTTP 头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，资源会发起一个跨域 HTTP 请求。
跨域请求是目前前端框架式发展中必须解决的问题，目前主流的浏览器均支持cors跨域请求，浏览器无需做过多的处理，在服务器端只需要设置Access-Control-Allow-Origin为*或者是或者是发起这个请求的页面的域名即可。但是IE浏览器只有在IE10及以上版本才支持。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
