前言
站在用戶的角度思考問(wèn)題，與客戶深入溝通，找到阿壩州網(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語(yǔ)言在多數(shù)時(shí)，會(huì)作為一個(gè)后端語(yǔ)言，為前端的php,node.js等提供API接口。前端通過(guò)ajax請(qǐng)求去調(diào)用java的API服務(wù)。今天以node.js為例，介紹兩種跨域方式：CrossOrigin和反向代理。
一、準(zhǔn)備工作
pom.xml：
<?xml version="1.0" encoding="UTF-8"?>4.0.0 com.example spring-boot-15 0.0.1-SNAPSHOT jar spring-boot-15 Demo project for Spring Boot org.springframework.boot spring-boot-starter-parent 1.5.3.RELEASE UTF-8 UTF-8 1.8 org.springframework.boot spring-boot-starter-web org.springframework.boot spring-boot-devtools runtime org.springframework.boot spring-boot-starter-test test org.springframework.boot spring-boot-maven-plugin
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 findAllUser() {
List 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)如下圖所示：
訪問(wèn)http://localhost:8080/findAllUser
使用HBuilder創(chuàng)建node.js express項(xiàng)目：
選擇ejs模板引擎：
index.ejs文件代碼如下：
<%= title %> <%= title %>
Welcome to <%= title %>
| {{row.id}} | {{row.name}} | {{row.age}} |
通過(guò)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 findAllUser() {
List 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，來(lái)實(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)求。
在訪問(wèn)http://localhost:3000，效果如下：
三、通過(guò)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”開(kāi)頭的請(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文件如下：
<%= title %>
<%= title %>
Welcome to
<%= title %>
| {{row.id}} | {{row.name}} | {{row.age}} |
運(yùn)行效果如下：
總結(jié)
第二種通過(guò)反向代理的方式是最佳方案。在正式項(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)起來(lái)，這樣便發(fā)揮出了網(wǎng)站靈活的擴(kuò)展性。
以上所述是小編給大家介紹的spring boot ajax跨域的兩種方式，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！
