spring boot ajax跨域的兩種方式
更新時間：2017年05月08日 15:33:12 作者：劉冬
java語言在多數(shù)時，會作為一個后端語言，為前端的php,node.js等提供API接口。這篇文章主要介紹了spring boot ajax跨域的兩種方式,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
前言
java語言在多數(shù)時，會作為一個后端語言，為前端的php,node.js等提供API接口。前端通過ajax請求去調用java的API服務。今天以node.js為例，介紹兩種跨域方式：CrossOrigin和反向代理。
一、準備工作
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;
}
}
項目結構如下圖所示：
訪問http://localhost:8080/findAllUser
使用HBuilder創(chuàng)建node.js express項目：
選擇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">
<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請求
右鍵運行項目：
運行效果：
發(fā)現(xiàn)調用ajax請求時跨域失敗。
二、spring boot后臺設置允許跨域
這時，修改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，來實現(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("/**")：為根目錄的全部請求，也可以設置為"/user/**"，這意味著是user目錄下的所有請求。
在訪問http://localhost:3000，效果如下：
三、通過node.js的方向代理實現(xiàn)跨域
node.js提供了一些反向代理的中間件，能輕而易舉的實現(xiàn)跨域，而不需要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”開頭的請求轉發(fā)為spring boot的API服務。
完整代碼如下：
/**
* 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">
<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>
運行效果如下：
總結
第二種通過反向代理的方式是最佳方案。在正式項目中，可以使用node.js控制web前端渲染與spring boot后端提供API服務的組合。這樣，可以控制用戶在node.js端登錄后才能調用spring boot的API服務。在大型web項目中也可以使用node.js的反向代理，把很多子站點關聯(lián)起來，這樣便發(fā)揮出了網(wǎng)站靈活的擴展性。
以上所述是小編給大家介紹的spring boot ajax跨域的兩種方式，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
這篇文章主要介紹了SpringBoot項目整合攔截器詳解,java里的攔截器是動態(tài)攔截Action調用的對象,它提供了一種機制可以使開發(fā)者在一個Action執(zhí)行的前后執(zhí)行一段代碼,攔截器用于在某個方法或者字段被訪問之前進行攔截,然后再之前或者之后加入某些操作,需要的朋友可以參考下2023-10-10
本篇文章是關于ava構造方法Vector源碼分析系列文章，本文主要介紹了Vector遍歷元素的源碼分析，有需要的朋友可以借鑒參考下，希望可以有所幫助2021-09-09
Springboot訪問templates html頁面過程詳解
這篇文章主要介紹了Springboot訪問templates html頁面過程詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-05-05
2020最新 idea下載、安裝與創(chuàng)建項目測試的教程圖解
這篇文章主要介紹了2020最新 idea下載、安裝與創(chuàng)建項目測試的教程，本文通過圖文并茂的形式給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-08-08
這篇文章主要介紹了SpringBoot中的SpringMVC自動配置詳解,Spring MVC自動配置是Spring Boot提供的一種特性,它可以自動配置Spring MVC的相關組件,簡化了開發(fā)人員的配置工作,需要的朋友可以參考下2023-10-10
下面小編就為大家?guī)硪黄帕兴惴?遞歸與字典序的實現(xiàn)方法(Java) 。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
這篇文章主要介紹了Collection stream使用示例，stream流幾乎可以完成對集合的任意操作，映射、去重、分組、排序、過濾等2022-12-12
Kotlin中?StateFlow?或?SharedFlow?的區(qū)別解析
Kotlin協(xié)程中的StateFlow和SharedFlow是響應式數(shù)據(jù)流,分別用于UI狀態(tài)管理和事件通知,StateFlow有初始值,只保留最新值,適用于UI狀態(tài)管理；SharedFlow沒有初始值,可以配置緩存大小,適用于事件通知,感興趣的朋友一起看看吧2025-03-03
這篇文章主要給大家分享的是 Java 數(shù)據(jù)庫連接池 DBCP 的介紹， 是 Apache 旗下 Commons 項目下的一個子項目，提供連接池功能DBCP，下面來看看文章的具體介紹內容吧,需要的朋友可以參考一下2021-11-11
這篇文章主要介紹了h2database在springboot中的使用,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-10-10