前言
站在用戶的角度思考問題,與客戶深入溝通,找到阿壩州網(wǎng)站設(shè)計(jì)與阿壩州網(wǎng)站推廣的解決方案,憑借多年的經(jīng)驗(yàn),讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合,創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品,建站類型包括:成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名申請(qǐng)、網(wǎng)站空間、企業(yè)郵箱。業(yè)務(wù)覆蓋阿壩州地區(qū)。
java語言在多數(shù)時(shí),會(huì)作為一個(gè)后端語言,為前端的php,node.js等提供API接口。前端通過ajax請(qǐng)求去調(diào)用java的API服務(wù)。今天以node.js為例,介紹兩種跨域方式:CrossOrigin和反向代理。
一、準(zhǔn)備工作
pom.xml:
<?xml version="1.0" encoding="UTF-8"?> <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.example</groupId> <artifactId>spring-boot-15</artifactId> <version>0.0.1-SNAPSHOT</version> <packaging>jar</packaging> <name>spring-boot-15</name> <description>Demo project for Spring Boot</description> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>1.5.3.RELEASE</version> <relativePath/> <!-- lookup parent from repository --> </parent> <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding> <java.version>1.8</java.version> </properties> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-devtools</artifactId> <scope>runtime</scope> </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>
pom.xml
App.java
package com.example; 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); } }
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; /** * * */ @RestController public 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; } }
項(xiàng)目結(jié)構(gòu)如下圖所示:
訪問http://localhost:8080/findAllUser
使用HBuilder創(chuàng)建node.js express項(xiàng)目:
選擇ejs模板引擎:
index.ejs文件代碼如下:
<!DOCTYPE html> <html> <head> <title> <%= title %> </title> <link rel='stylesheet' href='/stylesheets/style.css' /> <script src="http://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"> <h2><%= title %></h2> <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方法調(diào)用api請(qǐng)求
右鍵運(yùn)行項(xiàng)目:
運(yùn)行效果:
發(fā)現(xiàn)調(diào)用ajax請(qǐng)求時(shí)跨域失敗。
二、spring boot后臺(tái)設(shè)置允許跨域
這時(shí),修改MainController類,在方法前加@CrossOrigin注解:
/** * * */ @RestController public 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,來實(shí)現(xiàn)全局跨域:
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; @SpringBootApplication public 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("/**"):為根目錄的全部請(qǐng)求,也可以設(shè)置為"/user/**",這意味著是user目錄下的所有請(qǐng)求。
在訪問http://localhost:3000,效果如下:
三、通過node.js的方向代理實(shí)現(xiàn)跨域
node.js提供了一些反向代理的中間件,能輕而易舉的實(shí)現(xiàn)跨域,而不需要spring boot做任何設(shè)置。
安裝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”開頭的請(qǐng)求轉(zhuǎn)發(fā)為spring boot的API服務(wù)。
完整代碼如下:
/** * Module dependencies. */ var express = require('express') , routes = require('./routes') , user = require('./routes/user') , http = require('http') , path = require('path'); var app = express(); // all environments app.set('port', process.env.PORT || 3000); app.set('views', __dirname + '/views'); app.set('view engine', 'ejs'); app.use(express.favicon()); app.use(express.logger('dev')); app.use(express.bodyParser()); app.use(express.methodOverride()); app.use(app.router); app.use(express.static(path.join(__dirname, 'public'))); // development only if ('development' == app.get('env')) { app.use(express.errorHandler()); } var proxy = require('express-http-proxy'); var apiProxy = proxy('http://localhost:8080', {}); app.use('/api', apiProxy); app.get('/', routes.index); app.get('/users', user.list); http.createServer(app).listen(app.get('port'), function(){ console.log('Express server listening on port ' + app.get('port')); });
修改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文件如下:
<!DOCTYPE html> <html> <head> <title> <%= title %> </title> <link rel='stylesheet' href='/stylesheets/style.css' /> <script src="http://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: '/api/findAllUser' }).then(function successCallback(r) { $scope.rows = r.data; }); }); </script> </head> <body ng-app="app" ng-controller="MainController"> <h2><%= title %></h2> <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>
運(yùn)行效果如下:
總結(jié)
第二種通過反向代理的方式是最佳方案。在正式項(xiàng)目中,可以使用node.js控制web前端渲染與spring boot后端提供API服務(wù)的組合。這樣,可以控制用戶在node.js端登錄后才能調(diào)用spring boot的API服務(wù)。在大型web項(xiàng)目中也可以使用node.js的反向代理,把很多子站點(diǎn)關(guān)聯(lián)起來,這樣便發(fā)揮出了網(wǎng)站靈活的擴(kuò)展性。
以上所述是小編給大家介紹的spring boot ajax跨域的兩種方式,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持!
網(wǎng)站欄目:springbootajax跨域的兩種方式
文章地址:http://muchs.cn/article0/ijdjio.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供App開發(fā)、網(wǎng)站排名、響應(yīng)式網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、面包屑導(dǎo)航、網(wǎng)站維護(hù)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)