最近在项目开发的过程中遇到一些Javascript 跨域请求的问题，今天抽空对其进行总结一下，以备后用，也希望同学们在遇到类似问题的时候可以有所帮助。
同源策略 首先基于安全的原因，浏览器是存在同源策略这个机制的，同源策略阻止从一个域加载的脚本去获取另一个域上的文档属性。也就是说，受到请求的 URL 的域必须与当前 Web 页面的域相同。这意味着浏览器隔离来自不同源的内容，以防止它们之间的操作。 js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据。 只要协议、域名、端口有任何一个不同，都被当作是不同的域。 下面介绍几种常用的跨域请求方式 默认端口为：8080
我以前一直使用Vue来写前端。去年下半年接手了一个基于React + Next.js的项目，于是顺带学习了一下Next.js。由于Next.js的特点，这个项目的前后端是放在一起的。一开始没什么问题，看了半天文档就上手了。
一、一个页面上两个div左右铺满整个浏览器，要保证左边的div一直为100px，右边的div跟随浏览器大小变化（比如浏览器为500，右边div为400，浏览器为900，右边div为800），请写出大概的css代码。
来自：前端打小怪升级笔记，作者：spademan segmentfault.com/a/1190000008322096 一、一个页面上两个div左右铺满整个浏览器，要保证左边的div一直为100px，右边的div跟随浏览器大小变化（比如浏览器为500，右边div为400，浏览器为900，右边div为800），请写出大概的css代码。 1.使用flex //html //css .box{ width:400px; height:100px; display:flex; flex-direction:row
在js跨域双向数据传递时可以用iframe加上location.hash来实现，在研究这个的时候深入学习了一下hash的特性。 hash就是uri中#及后面的部分，例如：www.google.com.hk#123的#123。当只有hash部分发生变化时，浏览器的历史记录会产生记录，但不会向服务器发出请求，这时按后退键地址栏的uri会变化但页面内容不变。 而hash变化但不发出请求就是js跨域双向数据传递的基础啦。 下面就讲述一下hash结合ajax的使用，ajax每次取数据时页面更新后浏览器并
首先我们需要明白，在页面上直接发起一个跨域的ajax请求是不可以的，但是，在页面上引入不同域上的js脚本却是可以的，就像你可以在自己的页面上使用 标签来随意显示某个域上的图片一样。比如我在8080端口的页面上请求一个9090端口的图片：
那到底什么是跨域，简单地理解就是因为JavaScript同源策略的限制，a.com 域名下的js无法操作b.com或是c.a.com域名下的对象。更详细的说明可以看下表：
今天，我入职了一家浏览器公司，公司的主营业务是为人类提供Internet上网服务，我的岗位是负责执行JavaScript代码。
其中，源=协议+主机+端口，**两个源相同，称之为同源，两个源不同，称之为跨源或跨域
因为浏览器的同源策略，那什么是同源策略呢浏览器从A网站向B网站请求资源，必须同时满足三点才可以，协议相同，域名相同，端口相同，任何一点不同都会产生跨域，产生跨域后，浏览器就会阻止数据返回。
想做一个聊天机器人的界面，后台使用图灵机器人的服务，他们没有demo，遂自己写一个post请求。然而由于同源策略（CORS,Cross-Origin Sharing Standard），这个唯一的api完全不能用。
作为前端开发人员，你要是连同源策略都不知道是什么，那就太说不过去了。本篇文章将讲述同源策略的定义， 以及当我们需要克服同源策略，如何进行跨域访问数据的方法。
CORS 请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。
最近在业务代码中深受跨域问题困扰，因此特别写一篇博客来记录一下自己对跨域的理解以及使用到的参考资料。本文的项目背景基于vue+vuex+axios+springboot。涉及以下内容：
这是因为浏览器基于同源策略，在同源策略下浏览器不允许AjAX跨域获取服务器数据 同源策略是浏览器的安全策略，指的是请求URL地址中的协议，域名和端口都与当前发送请求的页面相同，只要一处不同就是跨域请求。
跨域，指的是浏览器不能执行其他网站的脚本。 它是由浏览器的同源策略造成的，是浏览器施加的安全限制。
支持到PHPCMS V9.1.18 前段时间由于结婚，耽搁了ueditor 1.2.2的整合，实在抱歉。最近几天熬夜整合了ueditor 1.2.3，依然是亮点与BUG同样闪耀的ueditor，依然是深度整合PHPCMS V9。 ueditor官方网站：http://ueditor.baidu.com/ ueditor在线演示：http://ueditor.baidu.com/website/onlinedemo.html PHPCMS 官方网站：http://www.phpcms.cn/ 注意：所有文件都是utf-8编码，gbk编码的同学需要自行转换编码。 感谢aqstudio同学进行gbk转码，gbk编码的同学请移步：http://bbs.phpcms.cn/thread-697394-1-1.html 下载方式依然在最后！ 2012年12月14日9时30分：修复前台会员中心投稿和黄页中上传页面显示问题（前台会员中心投稿要使用上传功能，需在后台“用户”》“管理会员组”中为相关用户组设置“允许上传附件”）。 2012年9月22日21时30分：修复抓取多个远传图片后所有图片均显示为第一个图片的问题。感谢水影（QQ:506883601）反馈BUG。（涉及文件：ueditor.php） 2012年9月13日23时20分：修复图片上传后在附件表中图片记录的status的状态为“0”的问题，修复图片上传后图片名(filename)的后缀名重复的问题。感谢DON（QQ:313959887）反馈BUG。（涉及文件：attachment.class.php，ueditor.php，wordimage.tpl.php，wordimage.tpl.php，editor_all.js，scrawl.js） 2012年9月4日16时30分：修复子标题对话框不能显示的BUG。 2012年9月4日0时30分：整合ueditor1.2.3，新增图片上传水印控制、涂鸦、远程图片抓取、word图片转存等功能，修复PHPCMS V9后台管理启用二级域名引发的JS跨域问题，改进子标题显示。感谢遥望（QQ:1239523）反馈修改意见。 2012年7月9日22时10分：由于最近准备婚礼，ueditor1.2.2整合只能推迟了，非常抱歉，敬请谅解！ 2012年6月9日16时20分：修复staticsjsueditordialogsimageimage.js中ueditor路径调用错误的BUG（造成前台、黄页或者其他位置上传图片时flash上传组件不能显示） 2012年6月2日22时50分：ueditor升级到1.2.1版本，新增了对远程抓取图片功能的整合（由于ueditor1.2.1改动较大，整合花了点时间，放出的晚了，请见谅，IE6下未测试，请用IE6的朋友帮忙测试一下） 2012年4月8日14时30分：感谢 “名湖（QQ：52061009）”帮助修改完善ueditor初始化代码和数据校验代码，修正编辑器z-index的问题，向名湖致敬！ 2012年4月7日晚9时：修正由于window.onload冲突而引起在谷歌浏览器下添加和修改新闻时提示“[hash]数据验证失败”的BUG。 主要功能： 1.为ueditor添加PHPCMS V9子标题插件 2.图片上传采用ueditor的默认上传插件 3.附件上传采用PHPCMS V9的附件上传 4.上传路径采用PHPCMS V9的默认目录模式 5.修正了PHPCMS V9 未使用附件列表中没有文件名的一个小BUG 6.实现远程图片抓取功能 7.整合ueditor涂鸦功能 8.整合ueditor word图片转存功能 9.修复PHPCMS V9后台管理启用二级域名而引发的JS跨域问题 10.支持前台用户投稿和黄页新闻发布 上图片：
参考https://blog.csdn.net/qq_27068845/article/details/73007155 http://blog.51cto.com/aaronsa/2071108 d
因为浏览器的同源策略（Same Origin Policy），对 JavaScript 实施了安全限制。非同一域名、协议、端口的请求，是不被浏览器允许的（浏览器会将该请求返回的响应内容拦截，并给出跨域警告）。
ajax只能请求同一个域下的数据或资源，有时候需要跨域请求数据，就需要用到jsonp技术，jsonp可以跨域请求数据，它的原理主要是利用了<script>标签可以跨域链接资源的特性。jsonp和ajax原理完全不一样，不过jquery将它们封装成同一个函数。
同源：如果两个页面拥有相同的协议(如http,https等)，端口(80,443)和域名(www.happyjava.cn)，那么这两个页面就属于同一个源。
现在很多人特别是前端开发人员，在ajax请求，XMLHttpRequest的过程中会碰到一个问题，那就是跨域请求：
这个错误是由于浏览器的跨域资源共享（CORS）策略引起的。网页从一个域名（例如'http://127.0.0.1:8848'）请求另一个域名（例如'http://192.168.16.107:8092'）的资源时，浏览器会阻止这个请求，除非服务器在响应中包含了适当的CORS头信息。
CORS（Cross-Origin Resource Sharing）跨域资源共享，定义了必须在访问跨域资源时，浏览器与服务器应该如何沟通。CORS背后的基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是失败。
Jsonp 的实现原理就是：创建一个回调函数，然后在远程服务上调用这个函数并且将 JSON 数据形式作为参数传递，完成回调。
一个域名下网站中的网页，去请求另一个域名下网站中的资源，就是跨域。
pdf.js一个基于Html的工具类，熟悉pdf.js的朋友们很清楚，pdf.js帮助我们做了很多事。尤其金融类网站会产生很多的报表。需要在线预览。pdf.js绝对是我们的首选
那么，何为同源呢？只有当协议、端口、域名都相同的页面，则两个页面具有相同的源。只要网站的协议protocol、 主机host、 端口号port 这三个中的任意一个不同，网站间的数据请求与传输便构成了跨域调用，会受到同源策略的限制。
本地同一浏览器访问本地HTML文件和访问服务器端HTML文件，本地Iframe没有自适应高度，而服务器端的Ifrane自适应了高度。
Fetch API[1] 是一种现代的 JavaScript API，用于进行「网络请求」。它提供了一种更简洁、灵活的方式来发送和接收数据，并取代了传统的 XMLHttpRequest[2]。Fetch API 使用 Promise 对象处理异步操作，使得处理网络请求变得更加直观和易用。
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/details/79474638
同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。所以xyz.com下的js脚本采用ajax读取abc.com里面的文件数据是会被拒绝的。
利用html里面script标签可以加载其他域下的js这一特性，使用script src的形式来获取其他域下的数据，但是，因为是通过标签引入的，所以，会将请求到的JSON格式的数据作为js去运行处理，显然这样运行是不行的。
不同源下，浏览器不允许js操作Cookie、LocalStorage、DOM等数据或页面元素，也不允许发送ajax请求，同源下则不受影响。
是不是又看到了熟悉的 No 'Access-Control-Allow-Origin' (这是跨域的经典标志), 惊不惊喜，意不意外，是不是很熟悉！
你之所以会遇到 跨域问题，正是因为 SOP 的各种限制。但是具体来说限制了什么呢？
「服务类型（Scheme）」 指明将被使用的协议（Protocol）。「协议」指定数据如何传输以及如何处理请求。当你查看协议时，你就能很好地理解这个 URL 的用途。（例如是带有 SMTP、POP3、IMAP 的电子邮件协议，还是获取和管理 git 仓库的 SSH 请求，或者是针对 Web 的 HTTP 请求。）
阅读目录 什么是跨域 常用的几种跨域处理方法： 跨域的原理解析及实现方法 总结 摘要：跨域问题，无论是面试还是平时的工作中，都会遇到，本文总结处理跨域问题的几种方法以及其原理，也让自己搞懂这方面的知识，走起。 什么是跨域 在JavaScript中，有一个很重要的安全性限制，被称为“Same-Origin Policy”（同源策略）。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制，即JavaScript只能访问与包含它的文档在同一域下的内容。 JavaScript这个安全策
b）、本文直接做的【get】测试，如需【post】测试，请将【ajax的type值改为post】
同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。
8888服务提供的 html,html 文件中又向8887服务发送AJAX请求,这就是跨域了!
取消跨域限制、跨域名携带Cookie限制、跨域名操作iframe限制之后的Chrome可以更加方便Web前端开发，同时也可以作为一个完美的爬虫框架。
这个时候，是遇到了跨域的问题； 由于接口跨域问题，因此不能直接通过ajax请求访问
首先提一下JSON这个概念，JSON是一种轻量级的数据传输格式，被广泛应用于当前Web应用中。JSON格式数据的编码和解析基本在所有主流语言中都被实现，所以现在大部分前后端分离的架构都以JSON格式进行数据的传输。
在了解跨域之前，我们必须要了解一下同源策略。 跨域问题其实就是浏览器的同源策略造成的。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
实时音视频
