导航:首页 > 解决方法 > web解决跨域的三种方法
web解决跨域的三种方法
发布时间：2022-08-20 02:23:35‘壹’ 手机APP和web服务端 跨域问题
跨域问题来源于JavaScript的同源策略，即只有 协议+主机名+端口号 (如存在)相同，则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源，不能访问和操作其他域下的资源。
在以前，前端和后端混杂在一起， 比如JavaScript直接调用同系统里面的一个Httphandler，就不存在跨域的问题，但是随着现代的这种多种客户端的流行，比如一个应用通常会有Web端，App端，以及WebApp端，各种客户端通常会使用同一套的后台处理逻辑，即API， 前后端分离的开发策略流行起来，前端只关注展现，通常使用JavaScript，后端处理逻辑和数据通常使用WebService来提供json数据。一般的前端页面和后端的WebService API通常部署在不同的服务器或者域名上。这样，通过ajax请求WebService的时候，就会出现同源策略的问题。
需要说明的是，同源策略是JavaScript里面的限制，其他的编程语言，比如在C#，Java或者iOS等其他语言中是可以调用外部的WebService，也就是说，如果开发Native应用，是不存在这个问题的，但是如果开发Web或者Html5如WebApp，通常使用JavaScript ajax对WebService发起请求然后解析返回的值，这样就可能存在跨域的问题。
一般的，很容易想到，将外部的资源搬到同一个域上就能解决同源策略的限制的。即在Web网站上同时开发一个Http服务端页面，所有JavaScript的请求都发到这个页面上来，这个页面在内部使用其他语言去调用外部的WebService。即添加一个代理层。这种方式可以解决问题，但是不够直接和高效。
目前，比较常见的跨域解决方案包括JSONP (JSON with padding)和CORS (Cross-origin resource sharing )。一些解决方案需要客户端和服务端配合如JSOP，一些则只需要服务端配合处理比如CORS。下面分别介绍这两种跨域方案，以及服务端WebService如何支持这两种跨域方案。
JSONP以及WebService的支持
同源策略下，某个服务器是无法获取到服务器以外的数据，但是html里面的img,iframe和script等标签是个例外，这些标签可以通过src属性请求到其他服务器上的数据。而JSONP就是通过script节点src调用跨域的请求。
当我们向服务器提交一个JSONP的请求时,我们给服务传了一个特殊的参数,告诉服务端要对结果特殊处理一下。这样服务端返回的数据就会进行一点包装，客户端就可以处理。
举个例子，服务端和客户端约定要传一个名为callback的参数来使用JSONP功能。比如请求的参数如下:
http://www.example.net/sample.aspx?callback=mycallback
如果没有后面的callback参数，即不使用JSONP的模式，该服务的返回结果可能是一个单纯的json字符串，比如：
{ foo : 'bar' }
如果和服务端约定jsonp格式，那么服务端就会处理callback的参数，将返回结果进行一下处理，比如处理成：
mycallback({ foo : 'bar' })
可以看到，这其实是一个函数调用，比如可以实现在页面定义一个名为mycallback的回调函数：
mycallback = function(data)
{
alert(data.foo);
};
现在，请求的返回值回去触发回调函数，这样就完了了跨域请求。
如果使用ServiceStack创建WebService的话，支持Jsonp方式的调用很简单，只需要在AppHost的Configure函数里面注册一下对响应结果进行过滤处理即可。
/// <summary>
/// Application specific configuration
/// This method should initialize any IoC resources utilized by your web service classes.
/// </summary>
/// <param name="container"></param>
public override void Configure(Container container)
{
ResponseFilters.Add((req, res, dto) =>
{
var func = req.QueryString.Get("callback");
if (!func.isNullOrEmpty())
{
res.AddHeader("Content-Type", ContentType.Html);
res.Write("<script type='text/javascript'>{0}({1});</script>"
.FormatWith(func, dto.ToJson()));
res.Close();
}
});
}
JSONP跨域方式比较方便，也支持各种较老的浏览器，但是缺点很明显，他只支持GET的方式提交，不支持其他Post的提交，Get方式对请求的参数长度有限制，在有些情况下可能不满足要求。所以下面就介绍一下CORS的跨域解决方案。
CORS跨域及WebService的支持
先来看一个例子，我们新建一个基本的html页面，在里面编写一个简单的是否支持跨域的小脚本，如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>AJAX跨域请求测试</title>
</head>
<body>
<input type='button' value='开始测试' onclick='crossDomainRequest()' />
<div id="content"></div>
<script type="text/javascript">
//<![CDATA[
var xhr = new XMLHttpRequest();
var url = 'http://localhost:8078/json/ShopUserLogin';
function crossDomainRequest() {
document.getElementById("content").innerHTML = "开始……";
if (xhr) {
xhr.open('POST', url, true);
xhr.onreadystatechange = handler;
xhr.send();
} else {
document.getElementById("content").innerHTML = "不能创建 XMLHttpRequest";
}
}
function handler(evtXHR) {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var response = xhr.responseText;
document.getElementById("content").innerHTML = "结果：" + response;
} else {
document.getElementById("content").innerHTML = "不允许跨域请求。";
}
}
else {
document.getElementById("content").innerHTML += "<br/>执行状态 readyState：" + xhr.readyState;
}
}
//]]>
</script>
</body>
</html>
然后保存为本地html文件，可以看到，这个脚本中，对本地的服务http://localhost:1337/json/Hello 发起了一个请求， 如果使用chrome 直接打开，会看到输出的结果，不允许跨域请求。 在javascript控制台程序中同样可以看到错误提示：
那么如果在返回响应头header中注入Access-Control-Allow-Origin，这样浏览器检测到header中的Access-Control-Allow-Origin，则就可以跨域操作了。
同样，如果使用ServcieStack，在很多地方可以支持CORS的跨域方式。最简单的还是在AppHost的Configure函数里面直接写入：
/// <summary>
/// Application specific configuration
/// This method should initialize any IoC resources utilized by your web service classes.
/// </summary>
/// <param name="container"></param>
public override void Configure(Container container)
{
this.AddPlugin(new CorsFeature());
}
这样就可以了，相当于使用默认的CORS配置：
CorsFeature(allowedOrigins:"*",
allowedMethods:"GET, POST, PUT, DELETE, OPTIONS",
allowedHeaders:"Content-Type",
allowCredentials:false);
如果仅仅允许GET和POST的请求支持CORS，则只需要改为：
Plugins.Add(new CorsFeature(allowedMethods: "GET, POST"));
当然也可以在AppHost的Config里面设置全局的CORS，如下：
/// <summary>
/// Application specific configuration
/// This method should initialize any IoC resources utilized by your web service classes.
/// </summary>
/// <param name="container"></param>
public override void Configure(Container container)
{
base.SetConfig(new EndpointHostConfig
{
GlobalResponseHeaders = {
{ "Access-Control-Allow-Origin", "*" },
{ "Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS" },
{ "Access-Control-Allow-Headers", "Content-Type" },
},
});
}
现在运行WebService，使用postman或者Chrome调用这个请求，可以看到返回的值头文件中，已经加上了响应头，并且可以正常显示返回结果了：
CORS使用起来简单，不需要客户端的额外处理，而且支持Post的方式提交请求，但是CORS的唯一一个缺点是对客户端的浏览器版本有要求，支持CORS的浏览器机器版本如下：
总结
本文介绍了JavaScript中的跨域基本概念和产生的原因，以及如何解决跨域的两种方法，一种是JSONP 一种是 CORS,在客户端Javascript调用服务端接口的时候，如果需要支持跨域的话，需要服务端支持。JSONP的方式就是服务端对返回的值进行回调函数包装，他的优点是支持众多的浏览器， 缺点是仅支持Get的方式对服务端请求。另一种主流的跨域方案是CORS，他仅需要服务端在返回数据的时候在相应头中加入标识信息。这种方式非常简便。唯一的缺点是需要浏览器的支持，一些较老的浏览器可能不支持CORS特性。
跨域支持是创建WebService时应该考虑的一个功能点，希望本文对您在这边面有所帮助，文中是使用ServiceStack来演示跨域支持的，如果您用的WCF的话，知道跨域原理的前提下，实现跨域应该不难。
参考资料：
https://github.com/ServiceStack/ServiceStack/wiki/Customize-HTTP-Responses
https://github.com/ServiceStack/ServiceStack/wiki/Request-and-response-filters
http://stackoverflow.com/questions/8211930/servicestack-rest-api-and-cors
http://stackoverflow.com/questions/15224038/rename-callback-parameter-for-jsonp
‘贰’ 用webuploader怎么解决跨域上传文件的问题
跨域请求前浏览器会自动发出一个options请求，如果服务器的响应头部中有如下信息：
Access-Control-Allow-Origin: #允许访问的源，如http://localhost:3000
Access-Control-Allow-Methods: #允许的方法，如get, post
浏览器收到这个响应就会继续原来的请求，否则就会终止。
在webuploader中可以在uploadBeforeSend的回调中设置请求的头部，例如
uploader.on('uploadBeforeSend', function(obj, data, headers) {
_.extend(headers, {
"Origin": "http://localhost:3000",
"Access-Control-Request-Method": "POST"
});
});
在服务端的post响应中增加头部：Access-Control-Allow-Origin: http://localhost:3000
‘叁’ 跨域怎么解决
1）访问原来无法访问的资源，如google
（2） 可以做缓存，加速访问资源
（3）对客户端访问授权，上网进行认证
（4）代理可以记录用户访问记录（上网行为管理），对外隐藏用户信息 客户端是无感知代理的存在的，反向代理对外都是透明的，访问者者并不知道自己访问的是一个代理。因为客户端不需要任何配置就可以访问。
（1）保证内网的安全，可以使用反向代理提供WAF功能，阻止web攻击 大型网站，通常将反向代理作为公网访问地址，Web服务
‘肆’ 前端跨域问题有哪些常用的解决方式
强烈推荐JSONP。
Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
http://www.cnblogs.com/yuzhongwusan/archive/2012/12/11/2812849.html
http://www.runoob.com/json/json-jsonp.html
http://justcoding.iteye.com/blog/1366102/
‘伍’ 跨域是指什么,因为什么引起的有哪些解决方案web前端知识
广义跨域就是指跨域访问，简单来说就是 A 网站的 javascript 代码试图访问 B 网站，包括提交内容和获取内容。由于安全原因，跨域访问是被各大浏览器所默认禁止的。
当一个域与其他域建立了信任关系后，2个域之间不但可以按需要相互进行管理，还可以跨网分配文件和打印机等设备资源，使不同的域之间实现网络资源的共享与管理。这就形成了“跨域”。
‘陆’ 访问本地页面 怎么解决浏览器跨域问题
前几天，工作上有一新需求，需要前端web页面异步调用后台的Webservice方法返回信息。实现方法有多种，本例采用jQuery+Ajax，完成后，在本地调试了一切ok，但是部署到服务器上以后就出现问题了，后台服务调用没有响应，怎么回事？代码没怎么改动，唯一修改的地方就是jQuery的ajax方法中的url地址。难道是这里的问题，经过检查和调试，发现原来是同源策略在作怪，我们知道，JavaScript或jQuery是在Web前端开发中经常使用的动态脚本技术。在JavaScript中，有一个很重要的安全性限制，被称为“Same- Origin Policy”（同源策略）。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制，即JavaScript只能访问与包含它的文档或脚本 在同一域名下的内容。不同域名下的脚本不能互相访问，即便是子域也不行。 但是有时候又不可避免地需要进行跨域操作，这时候“同源策略”就是一个限制了，怎么办呢？采用JSONP跨域GET请求是一个常用的解决方案，下面我们来看一下JSONP跨域是如何实现的，并探讨下JSONP跨域的原理。 这里提到了JSONP，那有人就问了，它同JSON有什么区别不同和区别呢，接下我们就来看看，网络有以下说明： JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于JavaScript（Standard ECMA-262 3rd Edition - December 1999）的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。这些特性使JSON成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成(网络传输速度快)。 JSONP(JSON with Padding)是JSON的 一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1 的网页无法与不是 server1的服务器沟通，而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。 到这里，应该明白了，JSON是一种轻量级的数据交换格式，像xml一样，是用来描述数据间的。JSONP是一种使用JSON数据的方式，返回的不是JSON对象，是包含JSON对象的javaScript脚本。 那JSONP是如何工作的呢，我们知道，由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源。若要跨域请求出于安全性考虑是不行的，但是我们发现，Web页面上调用js文件时则不受是否跨域的影响，而且拥有”src”这个属性的标签都拥有跨域的能力，比如<script>、<img>、<iframe>，这时候，聪明的程序猿就想到了变通的方法，如果要进行跨域请求， 通过使用html的script标记来进行跨域请求，并在响应中返回要执行的script代码，其中可以直接使用JSON传递 javascript对象。即在跨域的服务端生成JSON数据，然后包装成script脚本回传，这不就突破同源策略的限制，解决了跨域访问的问题了么。 下面我们就看下怎么实现： 前端代码： function CallWebServiceByJsonp() { $("#SubEquipmentDetails").html(''); $.ajax({ type: "GET", cache: false, url: "servername/webservice/webservice.asmx/GetSingleInfo", data: { strCparent: $("#Equipment_ID").val() }, dataType: "jsonp", //jsonp: "callback", jsonpCallback: "OnGetMemberSuccessByjsonp" }); } function OnGetMemberSuccessByjsonp(data) { //处理data alert(data); } 后端的WebService代码： [WebMethod] [ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true)] public void GetSingleInfo(string strCparent) { string ret = string.Empty; HttpContext.Current.Response.ContentType = "application/json;charset=utf-8"; string jsonCallBackFunName = HttpContext.Current.Request.Params["callback"].ToString(); //string jsonCallBackFunName1 = HttpContext.Current.Request.QueryString["callback"].Trim(); //上面代码必须 //中间代码执行自己的业务操作，可返回自己的任意信息（多数据类型） BLL.equipment eq_bll = new BLL.equipment(); List<Model.equipment> equipmentList = new List<Model.equipment>(); equipmentList = eq_bll.GetModelEquimentList(strCparent); ret = JsonConvert.SerializeObject(equipmentList); //下面代码必须 HttpContext.Current.Response.Write(string.Format("{0}({1})", jsonCallBackFunName, ret)); HttpContext.Current.Response.End(); } 如上所示，前端的CallWebServiceByJsonp方法采用jQuery的ajax方法调用后端的Web服务GetSingleInfo方法，后台的GetSingleInfo方法，使用前端的回调方法OnGetMemberSuccessByjsonp包装后台的业务操作的JSON对象，返回给前端一段javascript片段执行。巧妙的解决了跨域访问问题。 JSONP的缺点： JSONP不提供错误处理。如果动态插入的代码正常运行，你可以得到返回，但是如果失败了，那么什么都不会发生。 以上内容简单给大家介绍了JSONP解决Ajax跨域访问问题的思路，希望能够帮助到大家，如果大家有疑问欢迎给我留言，小编会及时回复大家的，在此也非常感谢大家对脚本之家网站的支持！
‘柒’ 怎么解决服务器间的跨域问题
1、服务端的解决方案的基本原理就是，由客户端将请求发给本域服务器，再由本域服务器的代理来请求数据并将响应返回给客户端。
2、最常用的服务器解决方案就是利用web服务器本身提供的proxy功能，如apache和lighttpd的mod_proxy模块。在网络内 部，transmit的分流功能也可以解决部分跨域问题。但这些方法都有一定的局限性，鉴于安全性等问题的考虑，space这边最后开发了一个专门用于处理跨域请求代理服务的spproxy模块，用于彻底解决js跨域问题。
3、下面将以空间的开放平台为例，简单介绍下如何通过apache的mod_proxy、transmit的分流以及space的spproxy模块来解
决该跨域问题，并简单介绍下spproxy的一些特性、缺点及下一步的改进计划。
空间在展现每个UWA开放模块之前都必须请求该模块的xml源代码以进行解析，每个模块的源代码文件都是存放在act域下的/ow/uwa目录下，那么在
4、用户空间首页（hi域）中请求该xml文件时就会存在js跨域问题。要解决该问题，只能让js向hi域的web服务器请求xml文件，而hi域web服务
器则通过一定的代理机制（如mod_proxy、transmit分流、spproxy）向act域的web服务器请求文件
‘捌’ 前端解决跨域都有哪些方法
什么是跨域？
浏览器发送的请求地址（URL）与所在页面的地址 不同（端口/协议/域名 其一不同）。简言之，浏览器发出的请求url，与其所在页面的url不一样。此时，同源策略会让浏览器拒收 服务器响应回来的数据，报错信息如下：
最常用的四种跨域解决方案
1.cors
cors跨域资源共享允许是在服务端"Access-Control-Allow-Origin"字段设置的，当将cors设置为允许某个地址访问时，该地址就可以跨域访问这个服务器地址。当cors设置为"*"时即允许所有地址访问时，则表示所有地址都可以跨域访问这个服务器地址的资源。
2、 通过jsonp跨域
Jsonp是Json的一种“使用模式”，他就可以解决浏览器遇到的跨域问题，我们可以动态创建script，再请求一个带参网址实现跨域通信。用Jsonp请求得到的是JavaScript，相当于直接用JavaScript解析。
3、postMessage跨域
在h5中新增了postMessage方法，postMessage可以实现跨文档消息传输，我们可以通过Windows的message事件来监听发送跨文档消息传输内容。
4、proxy（代理）
原理：因为同源策略只是针对浏览器的安全策略，但是服务端并不受同源策略的限制，也就不存在跨域的问题。
与web解决跨域的三种方法相关的资料
- 家具敲门解决方法
- 了解些鉴别方法是必须
- 用简单化学方法鉴别乙烯
- 项目不明确的解决方法
- 饺子老鼠怎么捏简单的方法
- 铝塑板鉴别方法
- 最简单的破土方法
- 简单小发明制作方法大全
- 煤炭焦炭项目检测方法
- 角质层干燥解决方法
- 黑曜石原石的鉴别方法
- 沙子发豆芽最简单的方法
- 空钩找底最简单的方法
- 挂车科目二倒库最简单又准的方法
- 解决民生问题方法
- 97贵州茅台酒真假细节鉴别方法
- 雷凌p2270故障码解决方法
- 大破三步虎最简单的方法
- 劣质蜂王浆的鉴别方法
- 高二自控能力差的解决方法
- 藏品鉴别真假的方法
- 三元正极材料检测方法
- 炒股简单方法
- 二期梅毒检测方法
- 红绳做项链简单方法
- 运城新绛县迁户口最简单方法
- 大众速腾涡轮杠子松动解决方法
- 改革开放以后的解决矛盾纠纷的方法
- 双抗试纸检测方法
- 检测黄疸值有哪些方法
- 可怕的问题和解决方法
- 学生怎么去汗毛简单的方法
- 压缩面膜的鉴别方法
- 品质二次元检测方法
- 氯化锌泄漏用什么方法检测
- 工业乙酸钙含量检测方法
- 片剂硬度检测方法
- 生活大难题解决方法
- 水套内漏检测方法
- 系统的鉴别分类方法
- 路费与食宿的解决方法
- 金字塔魔方最简单方法