2. 程式人生 > >從MVC到前後端分離（REST-個人也認為是目前比較流行和比較好的方式）

從MVC到前後端分離（REST-個人也認為是目前比較流行和比較好的方式）

阿新 • • 發佈：2019-02-15
摘要：MVC模式早在上個世紀70年代就誕生了，直到今天它依然存在，可見生命力相當之強。MVC模式最早用於Smalltalk語言中，最後在其它許多開發語言中都得到了很好的應用，例如，Java中的Struts、Spring MVC等框架。

1. 理解MVC

MVC是一種經典的設計模式，全名為Model-View-Controller，即模型-檢視-控制器。

其中，模型是用於封裝資料的載體，例如，在Java中一般通過一個簡單的POJO（Plain Ordinary Java Object）來表示，其本質是一個普通的Java Bean，包含一系列的成員變數及其getter/setter方法。對於檢視而言，它更加偏重於展現，也就是說，檢視決定了介面到底長什麼樣子，在Java中可通過JSP來充當檢視，或者通過純HTML的方式進行展現，而後者才是目前的主流。模型和檢視需要通過控制器來進行粘合，例如，使用者傳送一個HTTP請求，此時該請求首先會進入控制器，然後控制器去獲取資料並將其封裝為模型，最後將模型傳遞到檢視中進行展現。

綜上所述，MVC的互動過程如圖1所示。

2. MVC模式的優點與不足

MVC模式早在上個世紀70年代就誕生了，直到今天它依然存在，可見生命力相當之強。MVC模式最早用於Smalltalk語言中，最後在其它許多開發語言中都得到了很好的應用，例如，Java中的Struts、Spring MVC等框架。正是因為這些MVC框架的出現，才讓MVC模式真正落地，讓開發更加高效，讓程式碼耦合度儘量減小，讓應用程式各部分的職責更加清晰。

既然MVC模式這麼好，難道它就沒有不足的地方嗎？我認為MVC至少有以下三點不足：

  1. 每次請求必須經過“控制器->模型->檢視”這個流程，使用者才能看到最終的展現的介面，這個過程似乎有些複雜。
  2. 實際上檢視是依賴於模型的，換句話說，如果沒有模型，檢視也無法呈現出最終的效果。
  3. 渲染檢視的過程是在服務端來完成的，最終呈現給瀏覽器的是帶有模型的檢視頁面，效能無法得到很好的優化。

為了使資料展現過程更加直接，並且提供更好的使用者體驗，我們有必要對MVC模式進行改進。不妨這樣來嘗試，首先從瀏覽器傳送AJAX請求，然後服務端接受該請求並返回JSON資料返回給瀏覽器，最後在瀏覽器中進行介面渲染。

改進後的MVC模式如圖2所示。


也就是說，我們輸入的是AJAX請求，輸出的是JSON資料，市面上有這樣的技術來實現這個功能嗎？答案是REST。

REST全稱是Representational State Transfer（表述性狀態轉移），它是Roy Fielding博士在2000年寫的一篇關於軟體架構風格的論文，此文一出，威震四方！國內外許多知名網際網路公司紛紛開始採用這種輕量級的Web服務，大家習慣將其稱為RESTful Web Services，或簡稱REST服務。]

如果將瀏覽器這一端視為前端，而伺服器那一端視為後端的話，可以將以上改進後的MVC模式簡化為以下前後端分離模式，如圖3所示。


可見，有了REST服務，前端關注介面展現，後端關注業務邏輯，分工明確，職責清晰。那麼，如何使用REST服務將應用程式進行前後端分離呢？我們接下來繼續探討，首先我們需要認識REST。

3. 認識REST

REST本質上是使用URL來訪問資源種方式。眾所周知，URL就是我們平常使用的請求地址了，其中包括兩部分：請求方式與請求路徑，比較常見的請求方式是GET與POST，但在REST中又提出了幾種其它型別的請求方式，彙總起來有六種：GET、POST、PUT、DELETE、HEAD、OPTIONS。尤其是前四種，正好與CRUD（Create-Retrieve-Update-Delete，增刪改查）四種操作相對應，例如，GET（查）、POST（增）、PUT（改）、DELETE（刪），這正是REST與CRUD的異曲同工之妙！需要強調的是，REST是“面向資源”的，這裡提到的資源，實際上就是我們常說的領域物件，在系統設計過程中，我們經常通過領域物件來進行資料建模。

REST是一個“無狀態”的架構模式，因為在任何時候都可以由客戶端發出請求到服務端，最終返回自己想要的資料，當前請求不會受到上次請求的影響。也就是說，服務端將內部資源釋出REST服務，客戶端通過URL來訪問這些資源，這不就是SOA所提倡的“面向服務”的思想嗎？所以，REST也被人們看做是一種“輕量級”的SOA實現技術，因此在企業級應用與網際網路應用中都得到了廣泛應用。

下面我們舉幾個例子對REST請求進行簡單描述：


可見，請求路徑相同，但請求方式不同，所代表的業務操作也不同，例如，/advertiser/1這個請求，帶有GET、PUT、DELETE三種不同的請求方式，對應三種不同的業務操作。

雖然REST看起來還是很簡單的，實際上我們往往需要提供一個REST框架，讓其實現前後端分離架構，讓開發人員將精力集中在業務上，而並非那些具體的技術細節。下面我們將使用Java技術來實現這個REST框架，整體框架會基於Spring進行開發。

4. 實現REST框架

4.1 統一響應結構

使用REST框架實現前後端分離架構，我們需要首先確定返回的JSON響應結構是統一的，也就是說，每個REST請求將返回相同結構的JSON響應結構。不妨定義一個相對通用的JSON響應結構，其中包含兩部分：元資料與返回值，其中，元資料表示操作是否成功與返回值訊息等，返回值對應服務端方法所返回的資料。該JSON響應結構如下：

{
	"meta": {
		"success": true,
		"message": "ok"
	},
	"data": ...
}
為了在框架中對映以上JSON響應結構，我們需要編寫一個Response類與其對應：
  1. publicclass Response {  
  2.     privatestaticfinal String OK = "ok";  
  3.     privatestaticfinal String ERROR = "error";  
  4.     private Meta meta;  
  5.     private Object data;  
  6.     public Response success() {  
  7.         this.meta = new Meta(true, OK);  
  8.         returnthis;  
  9.     }  
  10.     public Response success(Object data) {  
  11.         this.meta = new Meta(true, OK);  
  12.         this.data = data;  
  13.         returnthis;  
  14.     }  
  15.     public Response failure() {  
  16.         this.meta = new Meta(false, ERROR);  
  17.         returnthis;  
  18.     }  
  19.     public Response failure(String message) {  
  20.         this.meta = new Meta(false, message);  
  21.         returnthis;  
  22.     }  
  23.     public Meta getMeta() {  
  24.         return meta;  
  25.     }  
  26.     public Object getData() {  
  27.         return data;  
  28.     }  
  29.     publicclass Meta {  
  30.         privateboolean success;  
  31.         private String message;  
  32.         public Meta(boolean success) {  
  33.             this.success = success;  
  34.         }  
  35.         public Meta(boolean success, String message) {  
  36.             this.success = success;  
  37.             this.message = message;  
  38.         }  
  39.         publicboolean isSuccess() {  
  40.             return success;  
  41.         }  
  42.         public String getMessage() {  
  43.             return message;  
  44.         }  
  45.     }  
  46. }  
以上Response類包括兩類通用返回值訊息：ok與error，還包括兩個常用的操作方法：success( )與failure( )，通過一個內部類來展現元資料結構，我們在下文中多次會使用該Response類。

實現該REST框架需要考慮許多問題，首當其衝的就是物件序列化問題。

4.2 實現物件序列化

想要解釋什麼是物件序列化？不妨通過一些例子進行說明。比如，通過瀏覽器傳送了一個普通的HTTP請求，該請求攜帶了一個JSON格式的引數，在服務端需要將該JSON引數轉換為普通的Java物件，這個轉換過程稱為序列化。再比如，在服務端獲取了資料，此時該資料是一個普通的Java物件，然後需要將這個Java物件轉換為JSON字串，並將其返回到瀏覽器中進行渲染，這個轉換過程稱為反序列化。不管是序列化還是反序列化，我們一般都稱為序列化。

實際上，Spring MVC已經為我們提供了這類序列化特性，只需在Controller的方法引數中使用@RequestBody註解定義需要反序列化的引數即可，如以下程式碼片段：

  1. @Controller
  2. publicclass AdvertiserController {  
  3.     @RequestMapping(value = "/advertiser", method = RequestMethod.POST)  
  4.     public Response createAdvertiser(@RequestBody AdvertiserParam advertiserParam) {  
  5.         ...  
  6.     }  
  7. }  
若需要對Controller的方法返回值進行序列化，則需要在該返回值上使用@ResponseBody註解來定義，如以下程式碼片段：
  1. @Controller
  2. publicclass AdvertiserController {  
  3.     @RequestMapping(value = "/advertiser/{id}", method = RequestMethod.GET)  
  4.     public@ResponseBody Response getAdvertiser(@PathVariable("id") String advertiserId) {  
  5.         ...  
  6.     }  
  7. }  
當然，@ResponseBody註解也可以定義在類上，這樣所有的方法都繼承了該特性。由於經常會使用到@ResponseBody註解，所以Spring提供了一個名為@RestController的註解來取代以上的@Controller註解，這樣我們就可以省略返回值前面的@ResponseBody註解了，但引數前面的@RequestBody註解是無法省略的。實際上，看看Spring中對應@RestController註解的原始碼便可知曉：
  1. @Target({ElementType.TYPE})  
  2. @Retention(RetentionPolicy.RUNTIME)  
  3. @Documented
  4. @Controller
  5. @ResponseBody
  6. public@interface RestController {  
  7.     String value() default"";  
  8. }  
可見，@RestController註解已經被@Controller與@ResponseBody註解定義過了，Spring框架會識別這類註解。需要注意的是，該特性在Spring 4.0中才引入。

因此，我們可將以上程式碼進行如下改寫：

  1. @RestController
  2. publicclass AdvertiserController {  
  3.     @RequestMapping(value = "/advertiser", method = RequestMethod.POST)  
  4.     public Response createAdvertiser(@RequestBody AdvertiserParam advertiserParam) {  
  5.         ...  
  6.     }  
  7.     @RequestMapping(value = "/advertiser/{id}", method = RequestMethod.GET)  
  8.     public Response getAdvertiser(@PathVariable("id") String advertiserId) {  
  9.         ...  
  10.     }  
  11. }  

除了使用註解來定義序列化行為以外，我們還需要使用Jackson來提供JSON的序列化操作，在Spring配置檔案中只需新增以下配置即可：

  1. <mvc:annotation-driven>
  2.     <mvc:message-converters>
  3.         <beanclass="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter"/>
  4.     </mvc:message-converters>
  5. </mvc:annotation-driven>
若需要對Jackson的序列化行為進行定製，比如，排除值為空屬性、進行縮排輸出、將駝峰轉為下劃線、進行日期格式化等，這又如何實現呢？

首先，我們需要擴充套件Jackson提供的ObjectMapper類，程式碼如下：

  1. publicclass CustomObjectMapper extends ObjectMapper {  
  2.     privateboolean camelCaseToLowerCaseWithUnderscores = false;  
  3.     private String dateFormatPattern;  
  4.     publicvoid setCamelCaseToLowerCaseWithUnderscores(boolean camelCaseToLowerCaseWithUnderscores) {  
  5.         this.camelCaseToLowerCaseWithUnderscores = camelCaseToLowerCaseWithUnderscores;  
  6.     }  
  7.     publicvoid setDateFormatPattern(String dateFormatPattern) {  
  8.         this.dateFormatPattern = dateFormatPattern;  
  9.     }  
  10.     publicvoid init() {  
  11.         // 排除值為空屬性
  12.         setSerializationInclusion(JsonInclude.Include.NON_NULL);  
  13.         // 進行縮排輸出
  14.         configure(SerializationFeature.INDENT_OUTPUT, true);  
  15.         // 將駝峰轉為下劃線
  16.         if (camelCaseToLowerCaseWithUnderscores) {  
  17.             setPropertyNamingStrategy(PropertyNamingStrategy.CAMEL_CASE_TO_LOWER_CASE_WITH_UNDERSCORES);  
  18.         }  
  19.         // 進行日期格式化
  20.         if (StringUtil.isNotEmpty(dateFormatPattern)) {  
  21.             DateFormat dateFormat = new SimpleDateFormat(dateFormatPattern);  
  22.             setDateFormat(dateFormat);  
  23.         }  
  24.     }  
  25. }  
然後，將CustomObjectMapper注入到MappingJackson2HttpMessageConverter中，Spring配置如下：
  1. <beanid="objectMapper"class="com.xxx.api.json.CustomObjectMapper"init-method="init">
  2.     <propertyname="camelCaseToLowerCaseWithUnderscores"value="true"/>
  3.     <propertyname="dateFormatPattern"value="yyyy-MM-dd HH:mm:ss"/>
  4. </bean>
  5. <mvc:annotation-driven>
  6.     <mvc:message-converters>
  7.         <beanclass="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
  8.             <propertyname="objectMapper"ref="objectMapper"/>
  9.         </bean>
  10.     </mvc:message-converters>
  11. </mvc:annotation-driven>
通過以上過程，我們已經完成了一個基於Spring MVC的REST框架，只不過該框架還非常單薄，還缺乏很多關鍵性特性，尤其是異常處理。

4.3 處理異常行為

在Spring MVC中，我們可以使用AOP技術，編寫一個全域性的異常處理切面類，用它來統一處理所有的異常行為，在Spring 3.2中才開始提供。使用法很簡單，只需定義一個類，並通過@ControllerAdvice註解將其標註即可，同時需要使用@ResponseBody註解表示返回值可序列化為JSON字串。程式碼如下：

  1. @ControllerAdvice
  2. @ResponseBody
  3. publicclass ExceptionAdvice {  
  4.     /** 
  5.      * 400 - Bad Request 
  6.      */
  7.     @ResponseStatus(HttpStatus.BAD_REQUEST)  
  8.     @ExceptionHandler(HttpMessageNotReadableException.class)  
  9.     public Response handleHttpMessageNotReadableException(HttpMessageNotReadableException e) {  
  10.         logger.error("引數解析失敗", e);  
  11.         returnnew Response().failure("could_not_read_json");  
  12.     }  
  13.     /** 
  14.      * 405 - Method Not Allowed 
  15.      */
  16.     @ResponseStatus(HttpStatus.METHOD_NOT_ALLOWED)  
  17.     @ExceptionHandler(HttpRequestMethodNotSupportedException.class)  
  18.     public Response handleHttpRequestMethodNotSupportedException(HttpRequestMethodNotSupportedException e) {  
  19.         logger.error("不支援當前請求方法", e);  
  20.         returnnew Response().failure("request_method_not_supported");  
  21.     }  
  22.     /** 
  23.      * 415 - Unsupported Media Type 
  24.      */
  25.     @ResponseStatus(HttpStatus.UNSUPPORTED_MEDIA_TYPE)  
  26.     @ExceptionHandler(HttpMediaTypeNotSupportedException.class)  
  27.     public Response handleHttpMediaTypeNotSupportedException(Exception e) {  
  28.         logger.error("不支援當前媒體型別", e);  
  29.         returnnew Response().failure("content_type_not_supported");  
  30.     }  
  31.     /** 
  32.      * 500 - Internal Server Error 
  33.      */
  34.     @ResponseStatus(HttpStatus.INTERNAL_SERVER_ERROR)  
  35.     @ExceptionHandler(Exception.class)  
  36.     public Response handleException(Exception e) {  
  37.         logger.error("服務執行異常", e);  
  38.         returnnew Response().failure(e.getMessage());  
  39.     }  
  40. }  
可見，在ExceptionAdvice類中包含一系列的異常處理方法，每個方法都通過@ResponseStatus註解定義了響應狀態碼，此外還通過@ExceptionHandler註解指定了具體需要攔截的異常類。以上過程只是包含了一部分的異常情況，若需處理其它異常，可新增方法具體的方法。需要注意的是，在執行時從上往下依次呼叫每個異常處理方法，匹配當前異常型別是否與@ExceptionHandler註解所定義的異常相匹配，若匹配，則執行該方法，同時忽略後續所有的異常處理方法，最終會返回經JSON序列化後的Response物件。

4.4 支援引數驗證

我們回到上文所提到的示例，這裡處理一個普通的POST請求，程式碼如下：

  1. @RestController
  2. publicclass AdvertiserController {  
  3.     @RequestMapping(value = "/advertiser", method = RequestMethod.POST)  
  4.     public Response createAdvertiser(@RequestBody AdvertiserParam advertiserParam) {  
  5.         ...  
  6.     }  
  7. }  
其中，AdvertiserParam引數包含若干屬性，通過以下類結構可見，它是一個傳統的POJO：
  1. publicclass AdvertiserParam {  
  2.     private String advertiserName;  
  3.     private String description;  
  4.     // 省略 getter/setter 方法
  5. }  
如果業務上需要確保AdvertiserParam物件的advertiserName屬性必填，如何實現呢？

若將這類引數驗證的程式碼寫死在Controller中，勢必會與正常的業務邏輯攪在一起，導致責任不夠單一，違背於“單一責任原則”。建議將其引數驗證行為從Controller中剝離出來，放到另外的類中，這裡僅提供一個@Valid註解來定義AdvertiserParam引數，並在AdvertiserParam類中通過@NotEmpty註解來定義advertiserName屬性，就像下面這樣：

  1. @RestController
  2. publicclass AdvertiserController {  
  3.     @RequestMapping(value = "/advertiser", method = RequestMethod.POST)  
  4.     public Response createAdvertiser(@RequestBody@Valid AdvertiserParam advertiserParam) {  
  5.         ...  
  6.     }  
  7. }  
  8. publicclass AdvertiserParam {  
  9.     @NotEmpty
  10.     private String advertiserName;  
  11.     private String description;  
  12.     // 省略 getter/setter 方法
  13. }  
這裡的@Valid註解實際上是Validation Bean規範提供的註解，該規範已由Hibernate Validator框架實現，因此需要新增以下Maven依賴到pom.xml檔案中：
  1. <dependency>
  2.     <groupId>org.hibernate</groupId>
  3.     <artifactId>hibernate-validator</artifactId>
  4.     <version>${hibernate-validator.version}</version>
  5. </dependency>
需要注意的是，Hibernate Validator與Hibernate沒有任何依賴關係，唯一有聯絡的只是都屬於JBoss公司的開源專案而已。

要實現@NotEmpty註解的功能，我們需要做以下幾件事情。

首先，定義一個@NotEmpty註解類，程式碼如下：

  1. @Documented
  2. @Target({ElementType.FIELD, ElementType.PARAMETER})  
  3. @Retention(RetentionPolicy.RUNTIME)  
  4. @Constraint(validatedBy = NotEmptyValidator.class)  
  5. public@interface NotEmpty {  
  6.     String message() default"not_empty";  
  7.     Class<?>[] groups() default {};  
  8.     Class<? extends Payload>[] payload() default {};  
  9. }  
以上註解類必須包含message、groups、payload三個屬性，因為這是規範所要求的，此外，需要通過@Constraint註解指定一個驗證器類，這裡對應的是NotEmptyValidator，其程式碼如下：
  1. publicclass NotEmptyValidator implements ConstraintValidator<NotEmpty, String> {  
  2.     @Override
  3.     publicvoid initialize(NotEmpty constraintAnnotation) {  
  4.     }  
  5.     @Override
  6.     publicboolean isValid(String value, ConstraintValidatorContext context) {  
  7.         return StringUtil.isNotEmpty(value);  
  8.     }  
  9. }  
以上驗證器類實現了ConstraintValidator介面，並在該介面的isValid( )方法中完成了具體的引數驗證邏輯。需要注意的是，實現介面時需要指定泛型，第一個引數表示驗證註解型別（NotEmpty），第二個引數表示需要驗證的引數型別（String）。

然後，我們需要在Spring配置檔案中開啟該特性，需新增如下配置：

  1. <beanclass="org.springframework.validation.beanvalidation.MethodValidationPostProcessor"/>

最後，需要在全域性異常處理類中新增引數驗證處理方法，程式碼如下：

  1. @ControllerAdvice
  2. @ResponseBody
  3. publicclass ExceptionAdvice {  
  4.     /** 
  5.      * 400 - Bad Request 
  6.      */
  7.     @ResponseStatus(HttpStatus.BAD_REQUEST)  
  8.     @ExceptionHandler(ValidationException.class)  
  9.     public Response handleValidationException(ValidationException e) {  
  10.         logger.error("引數驗證失敗", e);  
  11.         returnnew Response().failure("validation_exception");  
  12.     }  
  13. }  
至此，REST框架已集成了Bean Validation特性，我們可以使用各種註解來完成所需的引數驗證行為了。

看似該框架可以在本地成功跑起來，整個架構包含兩個應用，前端應用提供純靜態的HTML頁面，後端應用釋出REST API，前端需要通過AJAX呼叫後端釋出的REST API，然而AJAX是不支援跨域訪問的，也就是說，前後端兩個應用必須在同一個域名下才能訪問。這是非常嚴重的技術障礙，一定需要找到解決方案。

4.5 解決跨域問題

比如，前端應用為靜態站點且部署在http://web.xxx.com域下，後端應用釋出REST API並部署在http://api.xxx.com域下，如何使前端應用通過AJAX跨域訪問後端應用呢？這需要使用到CORS技術來實現，這也是目前最好的解決方案了。

[CORS全稱為Cross Origin Resource Sharing（跨域資源共享），服務端只需新增相關響應頭資訊，即可實現客戶端發出AJAX跨域請求。]

CORS技術非常簡單，易於實現，目前絕大多數瀏覽器均已支援該技術（IE8瀏覽器也支援了），服務端可通過任何程式語言來實現，只要能將CORS響應頭寫入response物件中即可。

下面我們繼續擴充套件REST框架，通過CORS技術實現AJAX跨域訪問。

首先，我們需要編寫一個Filter，用於過濾所有的HTTP請求，並將CORS響應頭寫入response物件中，程式碼如下：

  1. publicclass CorsFilter implements Filter {  
  2.     private String allowOrigin;  
  3.     private String allowMethods;  
  4.     private String allowCredentials;  
  5.     private String allowHeaders;  
  6.     private String exposeHeaders;  
  7.     @Override
  8.     publicvoid init(FilterConfig filterConfig) throws ServletException {  
  9.         allowOrigin = filterConfig.getInitParameter("allowOrigin");  
  10.         allowMethods = filterConfig.getInitParameter("allowMethods");  
  11.         allowCredentials = filterConfig.getInitParameter("allowCredentials");  
  12.         allowHeaders = filterConfig.getInitParameter("allowHeaders");  
  13.         exposeHeaders = filterConfig.getInitParameter("exposeHeaders");  
  14.     }  
  15.     @Override
  16.     publicvoid doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {  
  17.         HttpServletRequest request = (HttpServletRequest) req;  
  18.         HttpServletResponse response = (HttpServletResponse) res;  
  19.         if (StringUtil.isNotEmpty(allowOrigin)) {  
  20.             List<String> allowOriginList = Arrays.asList(allowOrigin.split(","));  
  21.             if (CollectionUtil.isNotEmpty(allowOriginList)) {  
  22.                 String currentOrigin = request.getHeader("Origin");  
  23.                 if (allowOriginList.contains(currentOrigin)) {  
  24.                     response.setHeader("Access-Control-Allow-Origin", currentOrigin);  
  25.                 }  
  26.             }  
  27.         }  
  28.         if (StringUtil.isNotEmpty(allowMethods)) {  
  29.             response.setHeader("Access-Control-Allow-Methods", allowMethods);  
  30.         }  
  31.         if (StringUtil.isNotEmpty(allowCredentials)) {  
  32.             response.setHeader("Access-Control-Allow-Credentials", allowCredentials);  
  33.         }  
  34.         if (StringUtil.isNotEmpty(allowHeaders)) {  
  35.             response.setHeader("Access-Control-Allow-Headers", allowHeaders);  
  36.         }  
  37.         if (StringUtil.isNotEmpty(exposeHeaders)) {  
  38.             response.setHeader("Access-Control-Expose-Headers", exposeHeaders);  
  39.         }  
  40.         chain.doFilter(req, res);  
  41.     }  
  42.     @Override
  43.     publicvoid destroy() {  
  44.     }  
  45. }  
以上CorsFilter將從web.xml中讀取相關Filter初始化引數，並將在處理HTTP請求時將這些引數寫入對應的CORS響應頭中，下面大致描述一下這些CORS響應頭的意義：
  • Access-Control-Allow-Origin：允許訪問的客戶端域名，例如：http://web.xxx.com，若為*，則表示從任意域都能訪問，即不做任何限制。
  • Access-Control-Allow-Methods：允許訪問的方法名，多個方法名用逗號分割，例如：GET,POST,PUT,DELETE,OPTIONS。
  • Access-Control-Allow-Credentials：是否允許請求帶有驗證資訊，若要獲取客戶端域下的cookie時，需要將其設定為true。
  • Access-Control-Allow-Headers：允許服務端訪問的客戶端請求頭，多個請求頭用逗號分割，例如：Content-Type。
  • Access-Control-Expose-Headers：允許客戶端訪問的服務端響應頭，多個響應頭用逗號分割。

需要注意的是，CORS規範中定義Access-Control-Allow-Origin只允許兩種取值，要麼為*，要麼為具體的域名，也就是說，不支援同時配置多個域名。為了解決跨多個域的問題，需要在程式碼中做一些處理，這裡將Filter初始化引數作為一個域名的集合（用逗號分隔），只需從當前請求中獲取Origin請求頭，就知道是從哪個域中發出的請求，若該請求在以上允許的域名集合中，則將其放入Access-Control-Allow-Origin響應頭，這樣跨多個域的問題就輕鬆解決了。

以下是web.xml中配置CorsFilter的方法：

  1. <filter>
  2.     <filter-name>corsFilter</filter-name>
  3.     <filter-class>com.xxx.api.cors.CorsFilter</filter-class>
  4.     <init-param>
  5.         <param-name>allowOrigin</param-name>
  6.         <param-value>http://web.xxx.com</param-value>
  7.     </init-param>
  8.     <init-param>
  9.         <param-name>allowMethods</param-name>
  10.         <param-value>GET,POST,PUT,DELETE,OPTIONS</param-value>
  11.     </init-param>
  12.     <init-param>
  13.         <param-name>allowCredentials</param-name>
  14.         <param-value>true</param-value>
  15.     </init-param>
  16.     <init-param>
  17.         <param-name>allowHeaders</param-name>
  18.         <param-value>Content-Type</param-value>
  19.     </init-param>
  20. </filter>
  21. <filter-mapping>
  22.     <filter-name>corsFilter</filter-name>
  23.     <url-pattern>/*</url-pattern>
  24. </filter-mapping>
完成以上過程即可實現AJAX跨域功能了，但似乎還存在另外一個問題，由於REST是無狀態的，後端應用釋出的REST API可在使用者未登入的情況下被任意呼叫，這顯然是不安全的，如何解決這個問題呢？我們需要為REST請求提供安全機制。

4.6 提供安全機制

解決REST安全呼叫問題，可以做得很複雜，也可以做得特簡單，可按照以下過程提供REST安全機制：

  1. 當用戶登入成功後，在服務端生成一個token，並將其放入記憶體中（可放入JVM或Redis中），同時將該token返回到客戶端。
  2. 在客戶端中將返回的token寫入cookie中，並且每次請求時都將token隨請求頭一起傳送到服務端。
  3. 提供一個AOP切面，用於攔截所有的Controller方法，在切面中判斷token的有效性。
  4. 當登出時，只需清理掉cookie中的token即可，服務端token可設定過期時間，使其自行移除。

首先，我們需要定義一個用於管理token的介面，包括建立token與檢查token有效性的功能。程式碼如下：

  1. publicinterface TokenManager {  
  2.     String createToken(String username);  
  3.     boolean checkToken(String token);  
  4. }  
然後，我們可提供一個簡單的TokenManager實現類，將token儲存到JVM記憶體中。程式碼如下：
  1. publicclass DefaultTokenManager implements TokenManager {  
  2.     privatestatic Map<String, String> tokenMap = new ConcurrentHashMap<>();  
  3.     @Override
  4.     public String createToken(String username) {  
  5.         String token = CodecUtil.createUUID();  
  6.         tokenMap.put(token, username);  
  7.         return token;  
  8.     }  
  9.     @Override
  10.     publicboolean checkToken(String token) {  
  11.         return !StringUtil.isEmpty(token) && tokenMap.containsKey(token);  
  12.     }  
  13. }  
需要注意的是，如果需要做到分散式叢集，建議基於Redis提供一個實現類，將token儲存到Redis中，並利用Redis與生俱來的特性，做到token的分散式一致性。

然後，我們可以基於Spring AOP寫一個切面類，用於攔截Controller類的方法，並從請求頭中獲取token，最後對token有效性進行判斷。程式碼如下：

  1. publicclass SecurityAspect {  
  2.     privatestaticfinal String DEFAULT_TOKEN_NAME = "X-Token";  
  3.     private TokenManager tokenManager;  
  4.     private String tokenName;  
  5.     publicvoid setTokenManager(TokenManager tokenManager) {  
  6.         this.tokenManager = tokenManager;  
  7.     }  
  8.     publicvoid setTokenName(String tokenName) {  
  9.         if (StringUtil.isEmpty(tokenName)) {  
  10.             tokenName = DEFAULT_TOKEN_NAME;  
  11.         }  
  12.         this.tokenName = tokenName;  
  13.     }  
  14.     public Object execute(ProceedingJoinPoint pjp) throws Throwable {  
  15.         // 從切點上獲取目標方法
  16.         MethodSignature methodSignature = (MethodSignature) pjp.getSignature();  
  17.         Method method = methodSignature.getMethod();  
  18.         // 若目標方法忽略了安全性檢查，則直接呼叫目標方法
  19.         if (method.isAnnotationPresent(IgnoreSecurity.class)) {  
  20.             return pjp.proceed();  
  21.         }  
  22.         // 從 request header 中獲取當前 token
  23.         String token = WebContext.getRequest().getHeader(tokenName);  
  24.         // 檢查 token 有效性
  25.         if (!tokenManager.checkToken(token)) {  
  26.             String message = String.format("token [%s] is invalid", token);  
  27.             thrownew TokenException(message);  
  28.         }  
  29.         // 呼叫目標方法
  30.         return pjp.proceed();  
  31.     }  
  32. }  
若要使SecurityAspect生效，則需要新增如下Spring 配置：
  1. <beanid="securityAspect"class="com.xxx.api.security.SecurityAspect">
  2.     <propertyname="tokenManager"ref="tokenManager"/>
  3.     <propertyname="tokenName"value="X-Token"/>
  4. </bean>
  5. <aop:config>
  6.     <aop:aspectref="securityAspect">
  7.         <aop:aroundmethod="execute"pointcut="@annotation(org.springframework.web.bind.annotation.RequestMapping)"/>
  8.     </aop:aspect>
  9. </aop:config>
最後，別忘了在web.xml中新增允許的X-Token響應頭，配置如下：
  1. <init-param>
  2.     <param-name>allowHeaders</param-name>
  3.     <param-value>Content-Type,X-Tok

相關推薦

從MVC到前後端分離（REST-個人也認為是目前比較流行和比較好的方式）

摘要：MVC模式早在上個世紀70年代就誕生了，直到今天它依然存在，可見生命力相當之強。MVC模式最早用於Smalltalk語言中，最後在其它許多開發語言中都得到了很好的應用，例如，Java中的Struts、Spring MVC等框架。 1. 理解MVC MVC是一種經典的設

什麼是前後端分離（純屬個人理解，有錯請糾正）

前後端分離是什麼樣的概念呢？node從中又有什麼作用呢？近期我群裡有一些朋友問我這種問題，下面我來說說我自己的看法。        在以往我們開發人員，前端只需要把UI轉為html，以及一些頁面效果。一些邏輯，包括一些資料傳送都是後端處理。但是現在，我們前端需要做的東西有很多

1.vue專案之前後端分離（vue前端專案啟動報錯出現問題的解決）

1.首先安裝node.js環境，安裝完成之後，可在控制面板中，進行驗證,如下圖所示： 因為我自己已經裝了，所以就不需要去擔心這個問題了： "D:\IDEA_JAVA\IntelliJ IDEA 2018.2.4\bin\runnerw.exe" D:\node\node.exe D:\

前後端分離（VUE+SPRINGBOOT）九 ELEMENT UI

寫頁面，頁面風格，樣式對於我們來說是件 很煩的事，由於現在VUE用的很火，所以網上出了很多對應的元件庫。 而這裡用的element Ui ，餓了嗎出品 git網上星星最多的 具體使用如下： 1，安裝 npm i element-ui -S 2，全域性引用（也

前後端分離（VUE+SPRINGBOOT）十五 微信移動端 企業微信的開發token和jsapi_ticket的存取

呼叫介面很簡單，寫2個方法，先寫一個POST，一個GET， 配置檔案裡配置好 每次需要用token或者是jsapi_ticket的時候，先去資料庫查詢有效的token 如果有則返回需要的token或者jsapi_ticket或者txlaccesstoken， 找不

前後端分離（VUE+SPRINGBOOT）十七 echarts報表開發

昨天剛好有個人問報表開發問題， 今天就把這個補齊， 所以說VUE好用，基本上用的多的元件都能找到， 圖形報表這個也一樣，話不多說， 1，安裝  npm install vue-echarts -S 2，引入 main.jsp   import VCharts

前後端分離（VUE+SPRINGBOOT）十七 後臺介紹

因為我本身是做後端開發的，感覺SPRINGBOOT沒什麼 好說的，無非就是正常的開發，我的專案結構如下： 專案大體分層是，PC端或者微信端通過HTTP/JSON的方式提交資料，開發時 通過nodejs的動態反向代理，部署時用NGINX反向代理請求到我的後端。 後端

前後端分離工作流程-個人見解

如何前後端分離？ 　　怎麼做前後端分離？大方向就是 　　後端專注於：後端控制層（Restful API） & 服務層 & 資料訪問層； 　　前端專注於：前端控制層（Nodejs） & 檢視層 　　本人認為的前後端分離模式應該是這樣

關於大型網站技術演進的思考（十七）--網站靜態化處理—滿足靜態化的前後端分離（9）

　　前後端分離的主題雖然講完了，但是前後端分離的內容並沒有結束，本篇將繼續前後端分離的問題，只不過這次前後端分離的講述將會圍繞著本系列的主題網站靜態化進行。在講本篇主題之前，我需要糾正一下前後端分離主題講述中會讓朋友們產生誤導的地方，這種誤導就是對時下流行的一些前後端分離方案（沒有使用nodejs的前後端分離

前後端分離（一）

一、基礎知識 1、Ajax是Asynchronous JavaScript and XML 的縮寫，即非同步的JavaScript和XML。傳統的網頁（不使用Ajax）如果需要更新內容，必須過載整個網頁。Ajax是一種無需重新載入整個網頁的情況下，能夠更新部分網頁的技術。

前後端分離（VUE+SPRINGBOOT）二

先把程式碼從上面DONwLOAD下來，可以看到有前臺程式碼和後臺程式碼分開的 我用IEAD開啟前臺，ELIPSE開啟後臺， 可以把資料庫初始化，配置資料庫資訊，即可啟動後端 後端是用SPRINGBOOT寫的，直接啟動啟動類，記住啟動埠， 然後前端的config/ind

ReactJS +Spring MVC前後端分離 RESTful 互動

After building your project and after the prototype We may want to find a way to find a connection of React front to the Java API

前後端分離（跨域）sessionid不一致Safari瀏覽器解決方案（不能保持會話或者不能儲存cookie）

對於前後端分離的專案或者單點登入的系統後臺需要做session會話校驗或者cookie跨域儲存，Safari瀏覽器可能會遇到無法儲存cookie的時候，解決方案如下：PC端Safari瀏覽器需要設定 偏好設定-> Safari -> 阻止Cookie ->

前後端分離（VUE+SPRINGBOOT）六 登陸

登陸可以用上節上的axios進行登陸操作 登陸後本地儲存登陸狀態，具體程式碼如下： handleLogin() {   this.$refs.loginForm.validate(valid => {     if (valid) {       this.load

Django +vue.js實現前後端分離（十三）

建立django專案 django-admin startproject ulb_manager 建立django下app作為專案後端 python manage,py startapp backend 在setting,py下的INSTALLED_APP配置下新增 backend 使用vue-init

REST風格框架實戰：從MVC到前後端分離(附完整Demo)

摘要： 　　本人在前輩《從MVC到前後端分離（REST-個人也認為是目前比較流行和比較好的方式）》一文的基礎上，實現了一個基於Spring的符合REST風格的完整Demo，具有MVC分層結構並實現前後端分離，該專案體現了一個具有REST風格專案的基本特徵，即具有統一響應結構、 前後臺數據流轉機制(HTTP

從MVC到前後端分離(Rest框架搭建)

1、理解 MVC        MVC 是一種經典的設計模式，全名為 Model-View-Controller，即 模型-檢視-控制器。其中，模型 是用於封裝資料的載體，例如，在 Java 中一般通過一個簡單的POJO（Plain Ordinary Java Object

從零開始搭建前後端分離的NetCore2.2（EF Core CodeFirst+Autofac）+Vue的專案框架之七使用JWT生成Token(個人見解)

　　在 上一篇 中講到了在NetCore專案中如何進行全域性的請求模型驗證，只要在請求模型中加了驗證特性，介面使用時只用將資料拿來使用，而不用去關係資料是否符合業務需求。 　　這篇中將講些個人對於JWT的看法和使用，在網上也能找到很多相關資料和如何使用，基本都是直接嵌到 &nbs

從零開始搭建django前後端分離專案 系列一（技術選型）

前言 最近公司要求基於公司的hadoop平臺做一個關於電信行動網路的資料分析平臺，整個專案需求大體分為四大功能模組：資料探勘分析、報表資料查詢、GIS地理化展示、任務監控管理。由於頁面功能較複雜，所以採用前後端分離方式開發。前端採用webpack+vue+vue-router+axios技術棧，後端用djan

從零開始搭建django前後端分離專案 系列二（專案搭建）

在開始專案之前，假設你已瞭解以下知識：webpack配置、vue.js、django。這裡不會教你webpack的基本配置、熱更新是什麼，也不會告訴你如何開始一個django專案，有需求的請百度，相關的文章已經很多了。  下面開始一步一步構建完整的專案： 1、開發環境準備 win7 x64 python 3.