一种是JSONP 一种是 CORS。

在客户端Javascript调用服务端接口的时候，如果需要支持跨域的话，需要服务端支持。

JSONP的方式就是服务端对返回的值进行回调函数包装，他的优点是支持众多的浏览器， 缺点是仅支持Get的方式对服务端请求。

另一种主流的跨域方案是CORS，他仅需要服务端在返回数据的时候在相应头中加入标识信息。这种方式非常简便。唯一的缺点是需要浏览器的支持，一些较老的浏览器可能不支持CORS特性。

跨域支持是创建WebService时应该考虑的一个功能点，文中是使用ServiceStack来演示跨域支持的，如果您用的WCF的话，知道跨域原理的前提下，实现跨域应该不难。

下面是对JSONP和CORS的解释：

跨域问题来源于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的浏览器机器版本如下：

web项目中的跨域问题解决方法的更多相关文章

  1. JS中实现跨域的方法总结

    今天早上在地铁看了点基础知识的考察题,看到了一个JS跨域的问题,仔细想了想自己脑子里竟然只剩下jsonp跨域和用nginx反向代理进行跨域,想着还有别的几种方法,就是想不起来,这个人呢,一上岁数这个脑 ...

  2. 前端vue开发中的跨域问题解决，以及nginx上线部署。（vue devServer与nginx）

    前言 最近做的一个项目中使用了vue+springboot的前后端分离模式 在前端开发的的时候,使用vue cli3的devServer来解决跨域问题 上线部署则是用的nginx反向代理至后台服务所开 ...

  3. web项目中获取各种路径的方法

    ~Apple   web项目中各种路径的获取 1.可以在servlet的init方法里 String path = getServletContext().getRealPath("/&qu ...

  4. AJAX跨域问题解决方法（4）——调用方解决跨域

    调用方解决跨域的方法只有一种,那就是隐藏跨域. 何为隐藏跨域? 隐藏跨域的核心思路是通过反向代理隐藏跨域以欺骗浏览器 什么是反向代理?反向代理是指通过中间服务器使得访问同一个域名的两个不同url最终会 ...

  5. 关于vue项目中axios跨域的解决方法（开发环境）

    1.在config文件中修改index.js proxyTable: { "/api":{ target: 'https://www.baidu.com/muc/',//你需要跨域 ...

  6. AJAX跨域问题解决方法（1）——禁止浏览器进行跨域限制

    思路:通过命令行修改浏览器启动参数,使得浏览器不进行跨域检查,从而允许跨域 方法:命令行参数启动浏览器后添加参数--disable-web-security 例:chrome --disable-we ...

  7. Vue+webpack项目中实现跨域的http请求

    目前Vue项目中对json数据的请求一般使用两个插件vue-resource和axios, 但vue-resource已经不再维护, 而axios是官方推荐的且npm下载量已经170多万,github ...

  8. Java Web应用中支持跨域请求

    转载:https://blog.csdn.net/lmy86263/article/details/51724221 由于工程合作开发的需要,后台的应用要能支持跨域访问,但是在这个跨域访问“时好时坏” ...

  9. GeoServer 2.15.0版本跨域问题解决方法

    geoserver默认不开启跨域设置,开启步骤如下: 1.修改配置文件web.xml,该配置文件的路径如下 \webapps\geoserver\WEB-INF\web.xml 2.搜索:cross- ...

随机推荐

  1. 转一篇关于Unity的PlayMaker

    这篇文章转自http://va.lent.in/should-you-use-playmaker-in-production/ 此文作者大概深受其苦,吐槽了playmaker的多个蛋疼的地方,这其实说 ...

  2. Google 面试

    坚持完成这套学习手册,你就可以去 Google 面试了 系统 指针 value Google 面试 阅读10266   本文为掘金投稿,译文出自:掘金翻译计划 原文地址:Google Intervie ...

  3. 关于Hellas和Greece

    一直以来我就好奇,为什么希腊的中文名字“希腊”和英文名字”Greece”听起来都不像(就像“德国”不像“Germany”一样),而且,为什么在很多体育比赛中看到希腊运动员的衣服上都是“Hellas”, ...

  4. Android开发之补间动画、XML方式定义补间动画

    四种补间动画: 1.透明: 2.缩放: 3.位移: 4.旋转: //点击按钮 实现iv 透明的效果 动画 public void click1(View v) { //1.0意味着着完全不透明 0.0 ...

  5. Linux终端更改提示符

    打开~/.bashrc可以看到命令提示的内容为:\u@\h\w\$ \u表示用户名,\h表示主机名,\w表示当前目录,\$表示命令提示符(普通用户$,超级用户#) 这个命令提示符有点长,很碍事,\u@ ...

  6. ClipDrawable 实现图片渐变现实

    clip.xml <?xml version="1.0" encoding="utf-8"?><clip xmlns:android=&quo ...

  7. android AccessibltyService 辅助服务

    1.使用Accessibility可以模拟手机点击,获取屏幕文字,通知消息等. 2.使用该类需新建一个AccessibilityService的子类,并在AndroidManifest.xml文件中注 ...

  8. jsp内置对象作业1-用户登录

    题目:编写一个jsp程序,实现用户登录,当用户输入的用户名或密码错误时,将页面重定向到错误提示也,并在该页面显示30秒后,自动返回到用户登录页面. 1.用户登录页面 <%@ page langu ...

  9. javascript 工具函数

    转义特殊字符为html实体 HtmlEncode: function(str){ return str.replace(/&/g, '&').replace(/\"/g, ' ...

  10. The prefix "tx" for element "tx:annotation-driven " is not bound

    The prefix "tx" for element "tx:advice" is not bound 这个错误的原因很简单是: 我们在定义申明AOP的时候. ...