Web应用中前端JavaScript访问后端的REST服务默认是不能跨域的,这里的域英文中叫Origin,有时也叫Domain,包含了协议(HTTP/HTTPS),域名和端口号。不能跨域指的是,如果来自http://abc.com:80的JavaScript代码只能访问http://abc.com:80中的资源(HTTP默认端口号为80,注意端口号不同也是不同的域)。大家不妨试一试在自己的JavaScript代码中去访问Google搜索的URL,代码是不能正常运行的。

Same Origin Policy(SOP)是浏览器默认的安全模型,为什么需要SOP呢? 因为如果允许JavaScript代码访问非相同域资源的话,那么安全性将变得完全不可控。举个例子,如果另外一个网址中包含的恶意脚本就可以没有任何防备的加载进来,那就就能随意获取或者恶意修改页面元素Cookie信息等。SOP则保证了所有你访问的资源和服务是来自于你自己的服务器,外部的脚本就不能没有任何障碍得攻击你了。当然这只是基本的安全模型,通过XSS等技术,如果你的代码有漏洞的话,还是可能受到来自不同域的恶意代码的攻击,这里就不展开啦。

但是有时候我们就是希望自己的服务是可以被跨域访问的,我们知道要访问的不同域的远程资源是安全的,这时候SOP反而给我们带来了限制。所以又出现了一些跨域访问的技术,比如JSONP。今天我们就来介绍如何基于Spring来实现可跨域访问的REST服务。

准备工作

今天我们来创建一个接收HTTP GET请求的REST服务,访问地址是http://localhost:8080/greetin),返回的格式为:

{
    "id": 1,
    "content": "Hello, World!"
}

如果请求中包含name参数,则会将默认的World替换为name的值。比如http://localhost:8080/greeting?name=User请求则返回:

{
    "id": 1,
    "content": "Hello, User!"
}

开发环境:

  • IDE+Java环境(JDK 1.7或以上版本)
  • Maven 3.0+(Eclipse和Idea IntelliJ内置,如果使用IDE并且不使用命令行工具可以不安装)

POM文件:

pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>com.tianmaying</groupId>
  <artifactId>cross-origin-demo</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <packaging>jar</packaging>

  <name>cross-origin-demo</name>
  <description>Demo of enabling Cross Origin Requests for a RESTful Web Service</description>

  <parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>1.2.5.RELEASE</version>
    <relativePath/>
  </parent>

  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <java.version>1.8</java.version>
  </properties>

  <dependencies>
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-web</artifactId>
    </dependency>  
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
    </dependency>
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-test</artifactId>
      <scope>test</scope>
    </dependency>
  </dependencies>

  <build>
    <plugins>
      <plugin>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-maven-plugin</artifactId>
      </plugin>
    </plugins>
  </build>

</project>

REST服务的实现

Greeting JSON格式的信息对应的模型类为Greeting类,非常简单。

Greeting.java

package com.tianmaying.crossorigin;

public class Greeting {

    private final long id;
    private final String content;

    public Greeting(long id, String content) {
        this.id = id;
        this.content = content;
    }

    public long getId() {
        return id;
    }

    public String getContent() {
        return content;
    }
}

Controller的实现我们应该也是轻车熟路了。

GreetingController.java

package com.tianmaying.crossorigin;

import java.util.concurrent.atomic.AtomicLong;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class GreetingController {

    private static final String template = "Hello, %s!";
    private final AtomicLong counter = new AtomicLong();

    @RequestMapping("/greeting")
    public @ResponseBody Greeting greeting(
            @RequestParam(value="name", required=false, defaultValue="World") String name) {
        return new Greeting(counter.incrementAndGet(),
                            String.format(template, name));
    }
}

@RequestMapping标注将/greeting请求映射到greeting()方法。

提示

上面的例子中没有指定URL对应的HTTP方法,比如GETPUTPOST或者DELETE,这表示所有HTTP方法都映射到这个URL上。如果希望指定特定的方法,可以这样设置@RequestMapping(method=GET)

@RequestParam将请求参数绑定到greeting()方法中的参数,该参数不是必须的,如果没有提供,则使用默认值World

方法的实现创建并返回了一个Greeting对象,id通过AtomicLong来设置,content则通过一个简单的字符串模板来生成。

REST服务和传统的MVC控制器的一个关键区别在于,REST服务通常并不依赖于一种模板技术(比如JSP、Velocity等)来生成HTML,REST服务只是填充好对象的信息,然后将对象信息转换为JSON字符串直接写入HTTP的响应中。而@ResponseBody正是来做这件事情的!

而对象转为为JSON这件事情,有了Spring的HTTP消息转换(HTTP Message Converter)的支持可以自动化的完成。只要Jackson 2在类路径中,Spring的MappingJackson2HttpMessageConverter会自动启用将Greeting对象转为JSON。


关于Spring MVC的更多内容请大家参考Spring MVC实战入门训练

跨域支持

接下来是最关键的时候了,之前我们已经实现了一个普通的REST服务,如何支持跨域就在此一举了:)我们只需要增加一个Filter,在HTTP响应中增加一些头信息,我们通过SimpleCORSFilter来实现。

SimpleCORSFilter.java

package com.tianmaying.crossorigin;

import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Component;

@Component
public class SimpleCORSFilter implements Filter {

    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
        chain.doFilter(req, res);
    }

    public void init(FilterConfig filterConfig) {}

    public void destroy() {}

}

SimpleCORSFilter在响应中增加了一些Access-Control-*头。在上面的例子中,设置的头信息表示允许来自任何域的客户端访问POST, GET, OPTIONSDELETE请求,请求的结果将缓存至多3600秒。当然,这只是一个很简单的跨域支持filter,大家可以根据需要进行更多的设置,比如只支持来自特定域的请求访问特定的资源。

测试

最后我们通过main()函数将这个SpringBootApplication Run起来:

App.java

package com.tianmaying.crossorigin;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class App {

    public static void main(String[] args) {
        SpringApplication.run(App.class, args);
    }
}


进一步阅读

登录发表评论 注册

David

@wangxufire 

主要原理是<script>是可以跨域的,而且在跨域脚本中可以直接回调当前脚本的函数。

限制在于需要创建一个DOM对象并且添加到DOM树,只能用于GET方法

David

JSONP利用的是<script>可以跨域的特性,跨域URL返回的脚本不仅包含数据,还包含一个回调:

// URL: http://b.a.com/foo
var data = {
    foo: 'bar',
    bar: 'foo'
};
callback(data);

然后在我们在主站http://a.com中,可以这样来跨域获取http://b.a.com的数据:

// URL: http://a.com/foo
var callback = function(data){
    // 处理跨域请求得到的数据
};
var script = $('<script>', {src: 'http://b.a.com/bar'});
$('body').append(script);

其实jQuery已经封装了JSONP的使用,我们可以这样来:

$.getJSON( "http://b.a.com/bar?callback=callback", function( data ){
    // 处理跨域请求得到的数据
});

$.getJSON$.get的区别是前者会把responseText转换为JSON,而且当URL具有callback参数时, jQuery将会把它解释为一个JSONP请求,创建一个<script>标签来完成该请求。

和所有依赖于创建HTML标签的方式一样,JSONP也不支持POST,而GET的数据是放在URL里的。 虽然[RFC 2616][rfc2610]没有提到限制到多少, 但提到了服务器可以对自己认为比较长的URL返回414状态码。一般来讲URL限长是在2000字符左右。

wangxufire

用JSONP怎么做?

David

谢谢鼓励:)

ae6623

通过一篇文章,就可以学到Spring boot,RestFul的简单工程,跨域知识,后台支持跨域的知识!真是不可多得的一篇好文章!

反馈意见