这次问题是从Btools更换获取数据方式开始的，因为B站收藏夹在前台页面返回的数据中删除了失效视频的封面和标题，导致原来的程序无法获取视频信息。
最近在项目开发的过程中遇到一些Javascript 跨域请求的问题，今天抽空对其进行总结一下，以备后用，也希望同学们在遇到类似问题的时候可以有所帮助。
相信每一个前端er对于跨域这两个字都不会陌生，在实际项目中应用也是比较多的。但跨域方法的多种多样实在让人目不暇接。老规矩，碰到这种情况，就只能自己总结一篇博客，作为记录。
单点登录功能分析 请求的url：/user/login 请求的方法：POST 参数：username、password，表单提交的数据。可以使用方法的形参接收。 返回值：json数据，包含一个token。 业务逻辑： 登录的业务流程：
跨域大家都知道，不同地址，不同端口，不同级别，不同协议都会构成跨域。例如：about.haorooms.com和www.haorooms.com都会构成跨域。总结起来只要协议、域名、端口有任何一个不同，都被当作是不同的域。下面举例，每两个一组。
在我们想要获取其他网站数据的时候，浏览器的同源策略（Same origin policy）会禁止此项行为，但有时不得不实现这一操作，就会涉及跨域的问题。解决跨域也就成了前端必须掌握的技能，其中JSONP就是一种解决该问题的好方法。
AJAX(Asynchronous JavaScript And XML):异步的JavaScript 和 XML
方案一：在Controller中取cookie中的token数据，调用sso服务查询用户信息。
我以前一直使用Vue来写前端。去年下半年接手了一个基于React + Next.js的项目，于是顺带学习了一下Next.js。由于Next.js的特点，这个项目的前后端是放在一起的。一开始没什么问题，看了半天文档就上手了。
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/details/79474638
更新说明：对文章排版以及内容格式做了调整。 更新时间：2022-05-04 今天重新学习之前写了半截的项目，其中提到了jsonp，当时也是查了很多资料，做了很多笔记，但是最近在写一个项目的时候，竟然遗忘了很多，所以特此做个总结，在下次再遇到jsonp的时候，可以有一个清晰的认识。 jsonp原理介绍 jsonp就是为了解决前端的跨域问题而进行的一项设计，jsonp之所以能实现跨域，是因为它发送的不是ajax请求，它动态创建了script标签，script标签是不受同源策略限制的，将script
Cross-origin Resource Sharing 中文名称 “跨域资源共享” 简称 “CORS”，它突破了一个请求在浏览器发出只能在同源的情况下向服务器获取数据的限制。
我们可以通过window.origin或location.origin得到当前源。
Jsonp 的实现原理就是：创建一个回调函数，然后在远程服务上调用这个函数并且将 JSON 数据形式作为参数传递，完成回调。
首先说个很多刚接触的人都想问的问题： jsonp到底是什么？ （看完本篇文章你就知道了） ---- 1、一个众所周知的问题，Ajax直接请求普通文件存在跨域无权限访问的问题，甭管你是静态页面、动态网页、web服务、WCF，只要是跨域请求，一律不准； 2、不过我们又发现，Web页面上调用js文件时则不受是否跨域的影响（不仅如此，我们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力，比如<script>、、<iframe>）； 3、于是可以判断，当前阶段如果想通过纯w
例如，下表给出了相对于http://www.test.com:80/index.html 端口号不写，默认为80.。
核心是使用jsonp 应用场景：大型网站为了进行协同开发，或者出于扩展性的考虑，会做多域名的处理. 比如：个人中心 ucenter.xxx.com 首页 www.xxx.com 商城页 shop.xxx.com 在web端不用域名之间是不能直接存取session，cookie数据的，也不能直接通过ajax异步请求json数据。 为了解决这类问题，就出现了jsonp，专门解决跨域问题。 业务需求： 在商城页和首页需要判断用户的登录状态： 已登录显示用户头像 未登录显示登录按钮 核心代码 php 个人中心返回用
所谓域同源，指的是两个服务器资源的根 url 的域名、端口、协议三者完全相同，只要三者中任何一个不同，则说明产生了跨域
前端技术真是一个发展飞快的领域，我三年前入职的时候只有原生XHR和Jquery ajax，我们还曾被JQuery 1.9版本版本以下不支持大文件请求这个问题卡了半天（最后自己写了原生的XHR请求）。一晃眼，JQuery ajax早已不能专美于前，axios和fetch都已经开始分别抢占“请求”这个前端高地。本文将会尝试着阐述他们之间的区别，并给出自己的一些理解。
跨域（Cross-Origin Resource Sharing，简称 CORS）是一种安全策略，用于限制一个域的网页如何与另一个域的资源进行交互。这是浏览器实现的同源策略（Same-Origin Policy）的一部分，旨在防止恶意网站通过一个域的网页访问另一个域的敏感数据。
SSO系统就是解决分布式环境下登录问题的，本质上是解决分布式环境下Session共享问题。
若两个URL 协议，端口，host都相同，则这两个URL同源。 这个方案叫做“协议/主机/端口元组”，或者直接是 “元组”
前端页面登录的url经常会挂掉，要改为本地地址。启动前端的demo项目。浏览器右键选择inspect打开调试界面，切到Network,点击Login，具体操作参考下图。
因为之前所在的公司开发模式前后端没有分离，所以在实际的开发中，基本上没有遇到跨域请求的问题，也没有注意相关问题。
前言 需求背景： 最近开发管理系统，需要在本页面跳转到一个图片管理系统上传图片，上传成功后返回图片链接，然后返回管理系统，显示图片 实现思路： 上传图片时，需要在本窗口跳转到图片管理系统，并且两个系统之间要通信 考虑到两个系统是不同的端口号，存在跨域问题，这时发现HTML5新增了一个API-window.postMessage()，于是就决定用iframe结合window.postMessage()实现 在页面中嵌入一个iframe，将图片管理系统嵌入到当前的管理系统中，结合window.postMessa
我们知道，在没有ajax技术之前，客户端若要与服务端进行数据交互，它的大概流程是：客户端发起一个http请求（也可能是其他的请求）然后处于等待状态，等到服务端将数据发送给客户端，客户端才会进行下一步操作，简单来讲，就是单纯的同步操作。然而，在现如今这个用户至上的年代，任何一个让用户不满的小操作都会导致巨大的流量丢失。
什么是跨域？ 概念：只要协议、域名、端口有任何一个不同，都被当作是不同的域。 URL 说明 是否允许通信 http://www.a.com/a.js http://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.js http://www.a.com/script/b.js 同一域名下不同文件夹 允许 http://www.a.com:8000/a.js htt
到此，我们完成了axios的绝大部分的功能，接下来我们来补全一下其他的小功能。
什么是AJAX，为什么要使用Ajax AJAX是“Asynchronous JavaScript and XML”的缩写。他是指一种创建交互式网页应用的网页开发技术。.、 客户端与服务器，可以在【不必刷新整个浏览器】的情况下，与服务器进行异步通讯的技术 AJAX应用和传统Web应用有什么不同？ AJAX应用和传统Web应用有什么不同？ 传统的web前端与后端的交互中，浏览器直接访问Tomcat的Servlet来获取数据。Servlet通过转发把数据发送给浏览器。 当我们使用AJAX之后，浏览器是先把请求发送
说到AJAX就会不可避免的面临两个问题，第一个是AJAX以何种格式来交换数据？第二个是跨域的需求如何解决？这两个问题目前都有不同的解决方案，比如数据可以用自定义字符串或者用XML来描述，跨域可以通过服务器端代理来解决。
在项目中，我们常常遇到跨域的问题，虽然在你的项目里，脚手架已经100%做好了本地代理、或者运维老铁在nginx中也已经给你做了接口代理，所以你遇到跨域的概率会少了很多，但是在传统的项目中，在那个jquery的横行时代，或者你接手了一个祖传项目时，跨域问题会是时有发生，本文只做笔者了解跨域的通用解决方案，希望在实际项目中对你有些思考和帮助。
那到底什么是跨域，简单地理解就是因为JavaScript同源策略的限制，a.com 域名下的js无法操作b.com或是c.a.com域名下的对象。更详细的说明可以看下表：
首先，我们创建一个名为koa2的工程目录，然后使用VS Code打开。然后，我们创建app.js，输入以下代码：
出于安全考虑，对于Ajax请求，浏览器会发起同源检查。所谓的同源是指发出请求的网页与请求的服务器对应的通讯协议、域名、端口完全一致。如果发起请求的网页和Ajax请求的目标地址不同源就会出现所谓的跨域问题而无法正确访问。
测试URL为 http://localhost:80/home/allProductions 可以直接在浏览器console中执行
在学习uniapp的过程中，发现uniapp框架默认集成request请求框架存在问题，发送请求时在header中塞入token值，而后台接收不到，也就是说uniapp默认的request请求框架，不支持在请求头中放入token的做法。 基于以上原因，笔者确定放弃默认的请求框架，引入第三方axios请求框架。
Next.js 是一个基于 React 的开发框架，它提供了很多强大的功能，如服务器端渲染、静态网站生成、API路由等。
一个项目一开始总是出于还不错愿景，但做着做着，就越来越乱了。万丈高楼平地起，有些基础的问题解决好，后面改需求就不会那么痛苦了。
虽然找到了一处XSS，但是题目又说明：“我收到邮件后会先点开链接然后登录我的网站！”，而登录的域名是auth.hardxss.xhlj.wetolink.com，登录和打开链接是在不同的域名，并且需要盗取的信息在请求中而不是在cookie中。又注意到，直接访问https://auth.hardxss.xhlj.wetolink.com/，返回的页面源码的js中包含跨域操作：document.domain = "hardxss.xhlj.wetolink.com";，
JavaScript代码在用户浏览器中执行时，由于一些边界情况、本地环境的不可控等因素，可能会存在js运行时错误。
如果我们前端页面的url和我们要提交的后端url存在跨域问题时，我们该如何解决呢？
在平日的工作中前端 badjs 是一个比较常见的问题， badjs 除了我们自身业务 js 脚本里比较明显的报错外还有依赖其他资源的一些报错，对于自身业务 js 里出现的错误很容易进行定位并修复，但对于依赖资源的错误即常见的 script error （外部 js、接口错误）定位就没那么容易了。
业务上经常出现这个问题，需要拦截某些特定请求，在该特定请求，页面采取或不采取什么变化
转载来源:https://www.cnblogs.com/ypSharing/p/corsHanlder.html
今天在写底层通信框架的时候，遇到了跨域的问题；随便给不知道的童鞋们分享下基础知识。 前言 由于Sencha Touch 2这种开发模式的特性，基本决定了它原生的数据交互行为几乎只能通过AJAX来实现。 当然了，通过调用强大的PhoneGap插件然后打包，你可以实现100%的Socket通讯和本地数据库功能，又或者通过HTML5的WebSocket也可以实现与服务器的通讯和服务端推功能，但这两种方式都有其局限性，前者需要PhoneGap支持，后者要求用户设备必须支持WebSocket，因此都
要理解跨域问题，就先理解好概念。跨域问题是由于javascript语言安全限制中的同源策略造成的.
说到AJAX就会不可避免的面临两个问题，第一个是AJAX以何种格式来交换数据？第二个是跨域的需求如何解决？这两个问题目前都有不同的解决方案，比如数据可以用自定义字符串或者用XML来描述，跨域可以通过服务器端代理来解决。 但到目前为止最被推崇或者说首选的方案还是用JSON来传数据，靠JSONP来跨域。而这就是本文将要讲述的内容。 JSON和JSONP虽然只有一个字母的差别，但其实他们根本不是一回事儿：JSON是一种数据交换格式，而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。我们拿
随着前端页面承载功能越来越多，用户本地浏览器环境也错综复杂，因此即使有完善的测试，我们也无法保证上线的代码不会出错。在这种场景下，前端页面的监控就成了各个web项目必备的工具。
同步——客户端发起请求，服务端需要处理，响应，此时客户端完全等待，当服务器处理完毕，客户端重新载入页面，如果出现错误，再次发生请求，处理，等待...
你只需要看完上面那篇文章和掌握一些前端开发基础，就足以自行编写一个 Chrome 插件。本文也是基于上面文章加上自己之前写的插件所记。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
