前言
java語言在多數時,會作爲一個後端語言,爲前端的php,node.js等提供API接口。前端通過ajax請求去調用java的API服務。今天以node.js爲例,介紹兩種跨域方式:CrossOrigin和反向代理。
一、準備工作
pom.xml:
pom.xml
App.java
package com.example;import org.springframework.boot.SpringApplication;import org.springframework.boot.autoconfigure.SpringBootApplication @SpringBootApplicationpublic class App { public static void main(String[] args) { SpringApplication.run(App.class, args); } }
User.java
package com.example;public class User { public int id; public String name; public int age; }
MainController.java:
package com.example;import java.util.ArrayList;import java.util.List;import org.springframework.web.bind.annotation.GetMapping;import org.springframework.web.bind.annotation.RestController;/** * 控制器 博客出處:http://www.cnblogs.com/GoodHelper/ * */@RestControllerpublic class MainController { @GetMapping("findAllUser") public List<User> findAllUser() { List<User> list = new ArrayList<>(); for (int i = 0; i < 20; i++) { User user = new User(); list.add(user); user.id = i; user.name = "name_" + i; user.age = 20 + i; } return list; } }
項目結構如下圖所示:
訪問http://localhost:8080/findAllUser
使用HBuilder創建node.js express項目:
選擇ejs模板引擎:
index.ejs文件代碼如下:
<!DOCTYPE html><html> <head> <title> <%= title %> </title> <link rel='stylesheet' href='/stylesheets/style.css' /> <script src="//cdn.bootcss.com/angular.js/1.5.6/angular.min.js"></script> <script type="text/javascript"> var app = angular.module('app', []); app.controller('MainController', function($rootScope, $scope, $http) { $http({ method: 'GET', url: 'http://localhost:8080/findAllUser' }).then(function successCallback(r) { $scope.rows = r.data; }); }); </script> </head> <body ng-app="app" ng-controller="MainController"> <h1><%= title %></h1> <p>Welcome to <%= title %> </p> <br /> <table> <tr ng-repeat="row in rows"> <td>`row`.`id`</td> <td>`row`.`name`</td> <td>`row`.`age`</td> </tr> </table> </body></html>
通過angular.js的http方法調用api請求
右鍵運行項目:
運行效果:
發現調用ajax請求時跨域失敗。
二、spring boot後臺設置允許跨域
這時,修改MainController類,在方法前加@CrossOrigin註解:
/** * 控制器 博客出處:http://www.cnblogs.com/GoodHelper/ * */@RestControllerpublic class MainController { @CrossOrigin(origins = "http://localhost:3000") @GetMapping("findAllUser") public List<User> findAllUser() { List<User> list = new ArrayList<>(); for (int i = 0; i < 20; i++) { User user = new User(); list.add(user); user.id = i; user.name = "name_" + i; user.age = 20 + i; } return list; } }
這是聲明findAllUser方法允許跨域,
也可以修改App.java,來實現全局跨域:
package com.example;import org.springframework.boot.SpringApplication;import org.springframework.boot.autoconfigure.SpringBootApplication;import org.springframework.context.annotation.Bean;import org.springframework.web.servlet.config.annotation.CorsRegistry;import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter; @SpringBootApplicationpublic class App { public static void main(String[] args) { SpringApplication.run(App.class, args); } @Bean public WebMvcConfigurer corsConfigurer() { return new WebMvcConfigurerAdapter() { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**").allowedOrigins("http://localhost:3000"); } }; } }
registry.addMapping("/**"):爲根目錄的全部請求,也可以設置爲"/user/**",這意味着是user目錄下的所有請求。
在訪問http://localhost:3000,效果如下:
三、通過node.js的反向代理實現跨域
node.js提供了一些反向代理的中間件,能輕而易舉的實現跨域,而不需要spring boot做任何設置。
安裝express-http-proxy中間件
npm install --save-dev express-http-proxy
修改app.js文件,使其支持反向代理:
var proxy = require('express-http-proxy');var apiProxy = proxy('http://localhost:8080', {}); app.use('/api', apiProxy);
以“/api”開頭的請求轉發爲spring boot的API服務。
完整代碼如下:
app.js
修改index.ejs文件:
var app = angular.module('app', []); app.controller('MainController', function($rootScope, $scope, $http) { $http({ method: 'GET', url: '/api/findAllUser' }).then(function successCallback(r) { $scope.rows = r.data; }); });
完整的index.ejs文件如下:
index.ejs
運行效果如下:
總結
第二種通過反向代理的方式是最佳方案。在正式項目中,可以使用node.js控制web前端渲染與spring boot後端提供API服務的組合。這樣,可以控制用戶在node.js端登錄後才能調用spring boot的API服務。在大型web項目中也可以使用node.js的反向代理,把很多子站點關聯起來,這樣便發揮出了網站靈活的擴展性。