玩转spring boot—

前言

java语言在多数时，会作为一个后端语言，为前端的html,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;

/**

 * 控制器 博客出处：http://www.cnblogs.com/GoodHelper/

 *

 */

@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创建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/

 *

 */

@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，来实现全局跨域：

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的反向代理实现跨域

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服务。

完整代码如下：

/**

 * 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'));

});

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文件如下：

<!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: '/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>

index.ejs

运行效果如下：

总结

　　第二种通过反向代理的方式是最佳方案。在正式项目中，可以使用node.js控制web前端渲染与spring boot后端提供API服务的组合。这样，可以控制用户在node.js端登录后才能调用spring boot的API服务。在大型web项目中也可以使用node.js的反向代理，把很多子站点关联起来，这样便发挥出了网站灵活的扩展性。除了使用node.js的中间件实现跨越以外，同样能借助nginx等http反向代理服务器实现跨越。

参考：

https://spring.io/guides/gs/rest-service-cors/

https://www.npmjs.com/package/express-http-proxy

代码地址：https://github.com/carter659/spring-boot-15.git

如果你觉得我的博客对你有帮助，可以给我点儿打赏，左侧微信，右侧支付宝。

有可能就是你的一点打赏会让我的博客写的更好:)

返回玩转spring boot系列目录

玩转spring boot——ajax跨域的更多相关文章

Spring Boot 允许跨域设置失败的问题深究
在公司开发过程中,一个前后端分离的项目遇见了跨域的问题. 前端控制台报错:No 'Access-Control-Allow-Origin' header is present on the reque ...
spring boot 解决跨域的两种方法 -- 前后端分离
1.前言以前做项目 ,基本上是使用 MVC 模式 ,使得视图与模型绑定 ,前后端地址与端口都一样 , 但是现在有些需求 ,需要暴露给外网访问 ,那么这就出现了个跨域问题 ,与同源原则冲突, 造成访问 ...
Spring/Spring MVC/Spring Boot实现跨域
说明:Spring MVC和Spring Boot其实用的都是同一套. CORS介绍请看这里:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Acc ...
Spring Boot实现跨域（转）
一.方法: 服务端设置Respone Header头中Access-Control-Allow-Origin 配合前台使用jsonp 继承WebMvcConfigurerAdapter 添加配置类二 ...
【Spring Boot】Spring Boot之跨域解决方案
一.什么是跨域跨域,指的是从一个域名去请求另外一个域名的资源.即跨域名请求!跨域时,浏览器不能执行其他域名网站的脚本,是由浏览器的同源策略造成的,是浏览器施加的安全限制. 跨域的严格一点来讲就是只要 ...
Spring Boot + Vue 跨域请求问题
使用Spring Boot + Vue 做前后端分离项目搭建,实现登录时,出现跨域请求 Access to XMLHttpRequest at 'http://localhost/open/login ...
spring boot 解决跨域访问
package com.newings.disaster.shelters.configuration; import org.springframework.context.annotation.B ...
spring mvc \ spring boot 允许跨域请求配置类
用@Component 注释下,随便放个地方就可以了 package com.chinaws.wsarchivesserver.core.config; import org.springframew ...
踩坑录- Spring Boot - CORS 跨域 - 浏览器同源策略
1.解决办法,创建一个过滤器,处理所有response响应头 import java.io.IOException; import javax.servlet.Filter; import javax ...

随机推荐

Android开发之AsyncTask示例Demo
今天做了一个AsyncTask的小Demo,内含注释,通过此Demo,可以对AsyncTask有一个详细的了解已经将项目上传到了GitHub上(程序有一个小bug,在第一次提交有说明,有解决方法请留 ...
java实现微信红包分配算法
红包算法分析有人认为,抢红包的额度是从0.01到剩余平均值*N(N是一个系数,决定最大的红包值)之间,比如一共发了10块钱,发了10个红包:第一个人可以拿到(0.01~1*N)之间的一个红包值,当然 ...
CoreCLR源码探索(四) GC内存收集器的内部实现分析篇
在这篇中我将讲述GC Collector内部的实现, 这是CoreCLR中除了JIT以外最复杂部分,下面一些概念目前尚未有公开的文档和书籍讲到. 为了分析这部分我花了一个多月的时间,期间也多次向Cor ...
JDBC与ArrayList和hashmao
JDBC帮助类 package work; import java.beans.Statement;import java.sql.Connection;import java.sql.DriverM ...
iphone与安卓的兼容性问题汇总
1.日期问题当使用yyyy-mm-dd格式时,iphone不认,安卓没问题解决办法:new Date(res.data[i].inventoryDate.replace(/-/g, "/ ...
20155323 2016-2017-2 《Java程序设计》第5周学习总结
20155323 2016-2017-2 <Java程序设计>第5周学习总结教材学习内容总结异常处理提供两种异常处理机制:捕获异常和声明抛弃异常. 捕获异常:在Java程序运行过程中 ...
POJ2352Stars【树状数组】
Stars Description Astronomers often examine star maps where stars are represented by points on a pla ...
ng自定义服务（利用factory）
ng中我们可以自己定义自己的服务,服务中是一些使用重复率较高的方法.因此有效的使用服务可以提高开发速度. ng中定义服务的方法有多种,service,factory,provide,在此我只介绍最长用 ...
【转】Flash字体嵌入方法
原文链接:http://www.cnblogs.com/ddw1997/archive/2011/11/13/2247546.html 一.如果使用flash cs5.5 1.先新建一个字体fla文件 ...
huffman压缩解压文件【代码】
距离上次写完哈夫曼编码已经过去一周了,这一周都在写huffman压缩解压,哎,在很多小错误上浪费了很多时间调bug.其实这个程序的最关键部分不是我自己想的,而是借鉴了某位园友的代码,但是,无论如何,自 ...

玩转spring boot——ajax跨域

玩转spring boot——ajax跨域的更多相关文章

随机推荐

热门专题