关键词：
前端与服务端数据交互时，涉及到跨域的一些问题。JavaScript出于安全的考虑，禁止了跨域调用其他页面的对象，也即同源策略限制了一个源（origin）中加载文本或脚本与来自其它源（origin）中资源的交互方式。
什么是跨域？
如果两个页面拥有相同的协议（protocol），端口（如果指定），和主机，那么这两个页面就属于同一个源（origin），JavaScript允许这种同源页面的数据互相通信。
带来的麻烦，以及解决方案
同源策略让JavaScript或Cookie只能访问同域下的内容，但在实际开发项目时会不可避免的要进行跨域操作，因此给前端带来了麻烦，跨域能力也算是前端工程师的基本功之一，对于端口和协议的不同，只能通过后台来解决了，下面主要说说主机不同情况实现跨域。
神器JSONP
JSONP是比较流行的跨域处理方式，网络上的定义：JSONP是资料格式JSON的一种使用模式，可以让网页从别的网域要资料，原理是HTML的script标签可以加载并执行其他域JS文件。站点B把要提供的数据作为参数传给一个站点A定义的全局函数，站点A引用这个文件就可以跨域获取数据了，A站还可以把少量参数放在script标签的src里提交给B站。外链JS这种方案只支持GET，受IE下url长度不能超过2083个字节的限制和出于安全考虑，一般不用来提交数据。
JSONP实际上就是被包含在一个回调函数中的JSON，例如callback({"name":"zhangsan"});
因此我们可以知道JSONP有两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数，而数据就是传入回调函数中的JSON数据，需要注意的是这个回调函数一定要让后端开发人员处理包裹，否则只能获取json数据，不能使用。
在js中，不可以直接用XMLHttpRequest请求不同域上的数据。但我们知道在页面上引入不同域上的js脚本文件是被允许的，JSONP就正是利用这个特性来实现的，例如：
<script src="http://jd.com/data.php?callback=dosomething"></script>
<script type="text/javascript">
function dosomething(jsondata){
console.log(jsondata);
}
</script>
js文件载入成功后，会执行我们在url参数中指定的函数（dosomething），并且会把我们需要的json数据（jsondata）作为参数传入。所以再次强调jsonp是需要服务器端的页面进行相应的配合的。
<?php
$callback=$_GET[‘callback‘];//得到回调函数名
$data={‘name‘:‘张三‘,sex:‘男‘,age:‘15‘};//要返回的数据
echo $callback.‘(‘.json_encode($data).‘)‘;//输出
?>
最终输出结果为：dosomething({‘name‘:‘张三‘,sex:‘男‘,age:‘15‘});
如果你使用jquery或者zepto，那么通过它封装的方法就能很方便的来进行JSONP操作了。
JSONP的优点是：
①：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制
②：它的兼容性更好，在老版本的浏览器中可以运行，不需要XMLHttpRequest或ActiveX的支持
③：它在请求完毕后可以通过调用callback的方式回传结果，方便调用。
JSONP的缺点则是：
①：它只支持GET请求而不支持POST等其他类型的HTTTP请求，不能提交大量数据
②：它只支持跨域HTTP请求这总情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。
先进的CORS
W3C推荐了一种更为先进的机制，也就是CORS（Cross-Origin Resource Sharing）跨域资源共享，定义了必须在访问跨域资源时，浏览器与服务器应该如何沟通。CORS背后的基本思想就是使用自定义的HTTP头部，让服务器能声明哪些来源可以通过浏览器访问该服务器上的资源，从而决定请求或响应是应该成功还是失败，CORS本身并非绝对很安全，可利用OAuth2措施来加强保障。
与JSONP相比较，CORS支持所有类型的HTTP请求，且开发者可以使用原生普通的XMLHttpRequest对象发起请求和获得数据，配合新的JSAPI一起使用，实现强大的新体验功能。
相关前台跨域的解决方式(代码片段)
title:前端跨域处理方式date:2018-07-0800:37:29categories:Web前端tags:跨域cors关于跨域请求解觉方案问题关于浏览器跨域问题，项目中也遇到了，看了项目上一些代码的处理方式，感觉存在不少不大完善的地方，因此对于跨域，想好好梳... 查看详情
依靠前端解决跨域问题的几种方式
首先我们先了解下跨域的概念： 出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建... 查看详情
解决geoserver请求跨域的几种思路
...域问题是浏览器同源安全制引起的特别常见的问题。不同前端语言针对跨域解决方法有所区别。比如Flex语言做跨域请求时，如果中间件存有跨域文件（crossdomain.xml）则可以轻松实现跨域。 而JS开发的前端，针对GET请... 查看详情
前端跨域问题各种解决方式及原理
跨域的各种解决方式及原理因为浏览器有某些安全级别的限制，例如，同源策略，所以在进行浏览器端的web应用开发的时候，经常会遇到跨域问题。同源策略：只有在同源的情况下（同域名，同协议，同端口）才能进行数据交互... 查看详情
前端跨域的三种解决方案
1.CORS跨域 前端不动 后端配合 像调用正常的接口一样调用接口，通过后端修改配置使得站点能够访问 2.JSONP跨域（github网址：https://github.com/webmodules/jsonp) 前端适配(安装jsonp插件) 后端配合 3.接口代理 ... 查看详情
vue--代理方式跨域
正向代理与反向代理前端使用代理主要用于跨域请求，关于跨域：常用的方式JSONP：利用script标签可跨域的特点，在跨域脚本中可以直接回调当前脚本的函数。CORS：服务器设置HTTP响应头中Access-Control-Allow-Origin值，解除跨域限制&n... 查看详情
解决geoserver请求跨域的几种思路，第二种思路用过
...域问题是浏览器同源安全制引起的特别常见的问题。不同前端语言针对跨域解决方法有所区别。比如Flex语言做跨域请求时，如果中间件存有跨域文件（crossdomain.xml）则可以轻松实现跨域。 而JS开发的前端，针对GET请... 查看详情
解决springboot跨域的三种方式
...文链接: https://3water.com/article/cMTM39MjMzdLmY5一、什么是跨域1.1、为什么会出现跨域问题出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览... 查看详情
跨域_解决浏览器跨域的方式
这里介绍的是--disable-web-security参数。这个参数可以降低chrome浏览器的安全性，禁用同源策略，利于开发人员本地调试。（1）新建一个chrome快捷方式，右键“属性”，“快捷方式”选项卡里选择“目标”，添加&... 查看详情
web前端跨域的一些解决方案
参考技术A没有归纳之前对跨域的一些说法是模糊的，什么jsonp啊，跨域原理啊，心里只有一个大概的说法，知道这个东西，然后用的时候直接百度Ctrl+C，后来闲下来决定整理一波这些知识点，需知其所以然。那么，其实这是浏览... 查看详情
cors跨域的限制与解决
...解析消息的将该条消息屏蔽同时在控制台报错。解决办法前端解决办法利用浏览器允许标签的跨域这一特性，例如JOSNP，但是JSONP只能使用get方法请求数据，jsonp的原理与实现后端解决办法添加允许跨域的 查看详情
解决跨域的方法
前端解决跨域的方法都是基于<script>标签可以跨域请求平时的ajax请求所经历的过程constxhr=newXMLHttpRequest()xhr.onreadystatechange=function()switch(xhr.readyState)case0://UNSENT(未打开)debuggerbreakcase1://OPENED(未发送)debuggerbreakc 查看详情
解决浏览器跨域的几种方式
1、什么是跨域问题 在页面中使用js访问其他网站的数据时，就会出现跨域问题，比如在网站中使用ajax请求其他网站的天气、快递或者其他数据接口时，以及hybridapp中请求数据，浏览器会提 示一下错误... 查看详情
00，跨域的问题
什么是跨域？浏览器的同源策略限制默认情况下前端页面和后端服务在不同服务器（域名、端口不一样）时，前端页面js无法请求到后端接口服务，即存在跨域问题。DRF是怎么解决跨域问题？使用Jsonp方式解决使用cors解决使... 查看详情
前端-关于cors跨域的解决方案，面向服务端
...jsp、freemaker、叶子等模板技术，而是由后端提供数据api，前端通过AJAX和JQuery来动态操作页面上的一些div、table元素，从而实现报表的动态加载。因为本人并非专业前端，所以采用的技术比较古老，对于最近的前端框架，vue,angular,... 查看详情
spring跨域的解决方式
...果这些方法用了都不行，还是出现状态码200但是还是出现跨域的错误：AccesstoXMLHttpRequestat'目标url'fromorigin'源url'hasbeenblockedbyCORSpolicy:No'Access-Control-Allow-Origin'headerispresentontherequestedresource.那么可能是被浏览器禁止... 查看详情
跨域问题
当前端页面与后台运行在不同的服务器时，就必定会出现跨域这一问题，本篇简单介绍解决跨域的三种方案，部分代码截图如下，仅供参考：方式一：使用ajax的jsonp前端代码 服务器代码 使用该方式的缺点：请求方式只能... 查看详情
跨域的三种解决方案
参考技术A跨域问题的出现是由于浏览器为了防止csrf攻击，避免恶意攻击而采取的同源策略限制，也就是当一个页面使用XMLHTTPRequest对象发送HTTP请求时（XHR）,必须保证当前页面和请求的资源是同源的（即协议，域名和端口号要完... 查看详情