最近在项目开发的过程中遇到一些Javascript 跨域请求的问题，今天抽空对其进行总结一下，以备后用，也希望同学们在遇到类似问题的时候可以有所帮助。
同源策略 首先基于安全的原因，浏览器是存在同源策略这个机制的，同源策略阻止从一个域加载的脚本去获取另一个域上的文档属性。也就是说，受到请求的 URL 的域必须与当前 Web 页面的域相同。这意味着浏览器隔离来自不同源的内容，以防止它们之间的操作。 js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据。 只要协议、域名、端口有任何一个不同，都被当作是不同的域。 下面介绍几种常用的跨域请求方式 默认端口为：8080
这个错误是由于浏览器的跨域资源共享（CORS）策略引起的。网页从一个域名（例如'http://127.0.0.1:8848'）请求另一个域名（例如'http://192.168.16.107:8092'）的资源时，浏览器会阻止这个请求，除非服务器在响应中包含了适当的CORS头信息。
那到底什么是跨域，简单地理解就是因为JavaScript同源策略的限制，a.com 域名下的js无法操作b.com或是c.a.com域名下的对象。更详细的说明可以看下表：
因为浏览器的同源策略（Same Origin Policy），对 JavaScript 实施了安全限制。非同一域名、协议、端口的请求，是不被浏览器允许的（浏览器会将该请求返回的响应内容拦截，并给出跨域警告）。
跨域问题是由于浏览器的同源策略（Same-Origin Policy）导致的，该策略要求浏览器只能发送同一来源（协议、域名、端口）的请求，而不能发送跨域请求。解决跨域问题的方法有多种，以下是一些常见的方法：
Jsonp 的实现原理就是：创建一个回调函数，然后在远程服务上调用这个函数并且将 JSON 数据形式作为参数传递，完成回调。
JSON是一种基于文本的数据交换方式（不支持跨域），而JSONP是一种非官方跨域数据交互协议。
正常情况下csrf攻击是无效的，当配置xhr.withCredentials支持跨域情况携带cookie，然后SameSite也支持的情况下这个时候跨域请求就存在隐患。
说到AJAX就会不可避免的面临两个问题，第一个是AJAX以何种格式来交换数据？第二个是跨域的需求如何解决？这两个问题目前都有不同的解决方案，比如数据可以用自定义字符串或者用XML来描述，跨域可以通过服务器端代理来解决。 但到目前为止最被推崇或者说首选的方案还是 用JSON来传数据，靠JSONP来跨域。而这就是本文将要讲述的内容。 JSON和JSONP虽然只有一个字母的差别，但其实他们根本不是一回事儿：JSON是一种数据交换格式，具体可以参见：json。而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。而本文主要讲述的是JSONP。
是不是又看到了熟悉的 No 'Access-Control-Allow-Origin' (这是跨域的经典标志), 惊不惊喜，意不意外，是不是很熟悉！
8888服务提供的 html,html 文件中又向8887服务发送AJAX请求,这就是跨域了!
跨域问题是在互联网开发中经常遇到的一个挑战。当一个网页试图从一个不同于它自身的域名请求数据时，浏览器通常会阻止这种跨域请求，以确保安全性。这种安全策略被称为"同源策略"（Same-Origin Policy），它有助于防止恶意网站获取用户的敏感信息。然而，对于开发者来说，有时需要允许跨域请求，以实现一些功能或服务。本文将深入探讨如何解决无法跨域问题，并介绍一些常见的解决方案和最佳实践。
一个域名下网站中的网页，去请求另一个域名下网站中的资源，就是跨域。
ES6是一种新的客户端脚本语言标准，语法上对原生JS进行了扩展，如提供了声明变量的let关键字和声明常量的const关键字，对函数进行扩展提供了箭头函数，函数参数默认值等，对对象进行了扩展提供了简洁操作语法，扩展了字符串操作函数、扩展了数组操作函数，扩展了Object操作函数等等，提供了class类和对象的新的语法标准等等！
JSONP(JSON with Padding)是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。
JavaScript这个安全策略在进行多iframe或多窗口编程、以及Ajax编程时显得尤为重要。
对于JSON和JSONP，应该都不陌生，咳咳，不过最初对JSONP有点误解，以为是JSON的另外一个别名，其实二者风马牛不相及。
Next.js 是一个基于 React 的开发框架，它提供了很多强大的功能，如服务器端渲染、静态网站生成、API路由等。
我以前一直使用Vue来写前端。去年下半年接手了一个基于React + Next.js的项目，于是顺带学习了一下Next.js。由于Next.js的特点，这个项目的前后端是放在一起的。一开始没什么问题，看了半天文档就上手了。
做过 web 开发的同学，应该都遇到过跨域的问题，当我们从一个域名向另一个域名发送 Ajax 请求的时候，打开浏览器控制台就会看到跨域错误，今天我们就来聊聊跨域的问题。
在了解跨域之前，我们必须要了解一下同源策略。 跨域问题其实就是浏览器的同源策略造成的。
ajax跨域问题 跨域 同源策略限制 同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说，受到请求的 URL 的域必须与当前 Web 页面的域相同。这意味着浏览器隔离来自不同源的内容，以防止它们之间的操作。 解决方式 通常来说，比较通用的有如下两种方式，一种是从服务器端下手，另一种则是从客户端的角度出发。二者各有利弊，具体要使用哪种方式还需要具体的分析。 服务器设置响应头 服务器代理 客户端采用脚本回调机制。 方式一 Access-Control-Allow-Origin 关键字只有在
同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。所以xyz.com下的js脚本采用ajax读取abc.com里面的文件数据是会被拒绝的。
HTTP 笔记 参加字节跳动的青训营时写的笔记。这部分是杨超男老师讲的课。 1. 简介 超文本协议(Hyper Text Transfer Protocol) 特点： 应用层协议，基于 TCP 协议 请求响应：遵循客户端-服务端模型，客户端打开一个连接发出请求，然后等待服务器响应 简单可扩展 无状态 2. 发展 3. 请求方法 方法 解释 GET 请求一个指定资源的表示形式，用于获取数据 POST 用于将实体提交到指定的资源。会导致在服务器上的状态变化或副作用 PUT 对服务器的数据进行修改。与 POS
其中，源=协议+主机+端口，**两个源相同，称之为同源，两个源不同，称之为跨源或跨域
https://www.cnblogs.com/poloyy/p/15345184.html
jsonp-script标签的src属性不受同源策略限制，用此方式对非同源服务器请求资源，返回的JS代码会调用指定的函数，携带的参数就是所需的数据，这样就完成了跨域请求。
在引入许多官方的CDN静态库时，会发现我们引入的script中，不单单只有src属性，还有crossorigin和integrity属性。
一般浏览器都是第二种方式限制跨域请求，那就是说请求已到达服务器，并有可能对数据库里的数据进行了操作，但是返回的结果被浏览器拦截了，那么我们就获取不到返回结果，这是一次失败的请求，但是可能对数据库里的数据产生了影响。
因为要读取本地json文件（test.json），分别使用了原生js方式和ajax方式（代码如下）。
JSON是一种轻量级的数据传输格式，被广泛应用于当前Web应用中。JSON格式数据的编码和解析基本在所有主流语言中都被实现，所以现在大部分前后端分离的架构都以JSON格式进行数据的传输。
那么，何为同源呢？只有当协议、端口、域名都相同的页面，则两个页面具有相同的源。只要网站的协议protocol、 主机host、 端口号port 这三个中的任意一个不同，网站间的数据请求与传输便构成了跨域调用，会受到同源策略的限制。
首先说个很多刚接触的人都想问的问题： jsonp到底是什么？ （看完本篇文章你就知道了） ---- 1、一个众所周知的问题，Ajax直接请求普通文件存在跨域无权限访问的问题，甭管你是静态页面、动态网页、web服务、WCF，只要是跨域请求，一律不准； 2、不过我们又发现，Web页面上调用js文件时则不受是否跨域的影响（不仅如此，我们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力，比如<script>、、<iframe>）； 3、于是可以判断，当前阶段如果想通过纯w
说到跨域访问，必须先解释一个名词：同源策略。所谓同源策略就是在浏览器端出于安全考量，向服务端发起请求必须满足：协议相同、Host(ip)相同、端口相同的条件，否则访问将被禁止，该访问也就被称为跨域访问。
本地同一浏览器访问本地HTML文件和访问服务器端HTML文件，本地Iframe没有自适应高度，而服务器端的Ifrane自适应了高度。
那么究竟什么是跨域，跨域又是怎么产生的，以及跨域请求的问题需要怎么解决。我们一起来了解一下这些知识。
跨域请求数据解决方案主要有如下解决方法： JSONP方式 表单POST方式 服务器代理 Html5的XDomainRequest Flash request 分开说明： 一、JSONP： 直观的理解： 就是在客户端动态注册一个函数 function a(data)，然后将函数名传到服务器，服务器返回一个a({/*json*/})到客户端运行,这样就调用客户端的 function a(data),从而实现了跨域. 诞生背景： 1、Ajax直接请求普通文件存在跨域无权访问的问题，甭管是静态页面、动态网页、web
HTTP(Hypertext Transfer protocol，超文本传输协议) 有一个很重要的特点：
JSONP是JSON with Padding的略称，JSONP为民间提出的一种跨域解决方案，通过客户端的script标签发出的请求方式。
同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。
那么跨域问题就是CORS全称Cross-Origin Resource Sharing，意为跨域资源共享。当一个资源去访问另一个不同域名或者同域名不同端口的资源时，就会发出跨域请求。如果此时另一个资源不允许其进行跨域资源访问，那么访问的那个资源就会遇到跨域问题。
在此之前一直以为传统的服务器使用session保存用户信息的方案在前后端分离时不能使用，无法获取请求的状态。 后面经过了解发现http本身就是无状态的，传统的session保存法也是因为服务端生成一个id返回给客户端保存在cookie中，客户端请求数据时将其通过请求头发给服务端，服务端再通过id找到具体数据即可。因此再跨域时只需能操作cookie就可以使用session了。恰好XMLHttpRequest对象提供了跨域接口withCredentials:跨域请求是否提供凭据信息(cookie、HTTP认证及客户端SSL证明等)。
这是因为浏览器基于同源策略，在同源策略下浏览器不允许AjAX跨域获取服务器数据 同源策略是浏览器的安全策略，指的是请求URL地址中的协议，域名和端口都与当前发送请求的页面相同，只要一处不同就是跨域请求。
公司的项目是前后端分离，前端Vue+后端JavaSpringBoot为主，部分功能是PythonTornado，那么需要支持一个是跨域以及Options请求。
想了解跨域就要先了解什么是同源策略，就好比你要了解什么苹果手机”越狱“，首先要了解什么是ios操作系统。 了解以下名词：
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议
