跨域请求解决方法(JSONP, CORS)

1、跨域

假设我们页面或者应用部署在 http://www.aaa.com 上了，而我们打算从 http://www.bbb.com 请求提取数据。一般情况下，如果我们直接使用 AJAX 来请求将会失败，浏览器也会返回“源不匹配”的错误，"跨域"也就以此由来。

 

这词在前端界出现的频率不低，主要原因还是由于安全限制(同源策略， 即JavaScript或Cookie只能访问同域下的内容)，项目开发不可避免的需要进行跨域操作，它是前端工程师的基本功之一。

 

大多数跨域的解决方案一样都是JSONP，但是它只支持GET。如果需要改成支持POST，因为传输的数据量比较大，GET形式搞不定。这就需要CORS（跨域资源共享，Cross-Origin Resource Sharing）。

 

2、jsonp：就是将返回的json数据放到一个回调方法里，只支持GET

 

客户端：get是后面加上www.bbb.com/11?callback=xxx

 

服务端：返回的数据：jsonpcallback({"Email":"[e-mail]","Remark":"我来自遥远的东方"})就是合法的js语句

 

3、cors：

 

客户端：需要发送请求的浏览器支持cors，代码：

 

var data = {name:"a",password:"bb",email:"[e-mail]",birthday:"1980-01-23"};

 $.ajax({
   url: 'http://127.0.0.1:8080/RestEasy_04/User',
   type: 'POST',
   contentType : 'application/json',
   dataType: "json",
   data: JSON.stringify(data),
   success: function(){
     console.log(arguments);
   },
   error: function(){
     console.log('error')
   }
 });

 

服务端：返回的时添加头 Access-Control-Allow-Origin

 

为了防止XSS攻击我们的服务器，也可以设置指定的域名，如只允许来自域名 http://www.aaa.com 的请求：

 

Access-Control-Allow-Origin: http://www.aaa.com

 

4、java的cors解决方法：CORS Filter

使用Maven添加cors-filter，pom.xml

<dependency>
    <groupId>com.thetransactioncompany</groupId>
    <artifactId>cors-filter</artifactId>
    <version>2.1.2</version>
</dependency>

使用

web.xml添加过滤器：

<filter>
    <filter-name>CORS</filter-name>
    <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
</filter>

为单独的servlet应用过滤如下:

<filter-mapping>
        <filter-name>CORS</filter-name>
        <servlet-name>MyServlet</servlet-name>
</filter-mapping>

为指定路径应用过滤如下：

<filter-mapping>
        <filter-name>CORS</filter-name>
        <url-pattern>/*</url-pattern>
</filter-mapping>

另附下载地址:http://software.dzhuvinov.com/cors-filter.html

使用方法:http://software.dzhuvinov.com/cors-filter-installation.html