JavaScript 跨域请求

1、最简单通用的做法就是 反向代理

        通过nginx搭建一个反向代理服务器，通过将跨域的请求配置成转发；此方法适用于动静分离时，很多跨域请求的情况下；

1. server {
   listen 80;
   server_name localhost;
   #charset koi8-r;
   #access_log logs/host.access.log main;
   location / {
   proxy_pass http://localhost:8080;
   }
   location /asset/ {
   # asset 的父目录
   root E:\\codespace2\\finapm_1.3.1\\src\\main\\webapp;
   }
   #error_page 404 /404.html;
   # redirect server error pages to the static page /50x.html
   #
   error_page 500 502 503 504 /50x.html;
   location = /50x.html {
   root html;
   }
   }

2、jsonp

        项目中很少的需要调用第三方服务的请求，可以通过此方法实现；前提是第三方必须提供了jsonp实现；

        需要服务端配合，不能进行post请求；

jsonp的原理

首先在客户端注册一个callback, 然后把callback的名字传给服务器。

此时，服务器先生成 json 数据。

然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 jsonp.

最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。

客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里.（动态执行回调函数）

服务端代码：

1. public@ResponseBodyObject info(HttpServletRequest request,@RequestParamString callback){
   if(callback !=null){
   return"console.log('cb','jsonp')";
   }
   }

客户端代码：

1. var JSONP=document.createElement("script");
   JSONP.type="text/javascript";
   JSONP.src="http://localhost:8080/user/info?callback=jsonpCallback";
   document.getElementsByTagName("head")[0].appendChild(JSONP);
   或
   $.get('http://localhost:8080/user/info?callback=cb',function(json){for(var i in json) alert(i+":"+json[i]);},'jsonp');

3、cors (cross origin resources sharing)

        跨域请求时，浏览器会进行一次握手请求options，如果服务端返回允许请求，浏览器才会发起真正的请求；

　　http://www.cnblogs.com/yuzhongwusan/p/3677955.html

     CORS与JSONP相比，无疑更为先进、方便和可靠。

        1、 JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求。

        2、 使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理。

        3、 JSONP主要被老的浏览器支持，它们往往不支持CORS，而绝大多数现代浏览器都已经支持了CORS（这部分会在后文浏览器支持部分介绍）。

tomcat 配置cors http://blog.csdn.net/newjueqi/article/details/27058765

        下载cors-filter-1.7.jar，java-property-utils-1.9.jar这两个库文件，放到lib目录下。（可在http://search.maven.org上查询并下载。）工程项目中web.xml中的配置如下： 

1. <filter>
   <filter-name>CORS</filter-name>
   <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
   <init-param>
   <param-name>cors.allowOrigin</param-name>
   <param-value>*</param-value>
   </init-param>
   <init-param>
   <param-name>cors.supportedMethods</param-name>
   <param-value>GET, POST, HEAD, PUT, DELETE</param-value>
   </init-param>
   <init-param>
   <param-name>cors.supportedHeaders</param-name>
   <param-value>Accept, Origin, X-Requested-With, Content-Type, Last-Modified</param-value>
   </init-param>
   <init-param>
   <param-name>cors.exposedHeaders</param-name>
   <param-value>Set-Cookie</param-value>
   </init-param>
   <init-param>
   <param-name>cors.supportsCredentials</param-name>
   <param-value>true</param-value>
   </init-param>
   </filter>
   <filter-mapping>
   <filter-name>CORS</filter-name>
   <url-pattern>/*</url-pattern>
   </filter-mapping>

 

        

来自为知笔记(Wiz)