AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

玩转spring boot——ajax跨域

2017-05-15 1117
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 前言  java语言在多数时，会作为一个后端语言，为前端的php,node.js等提供API接口。前端通过ajax请求去调用java的API服务。今天以node.js为例，介绍两种跨域方式：CrossOrigin和反向代理。

前言

 java语言在多数时，会作为一个后端语言，为前端的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>
复制代码

 

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'));
});
复制代码

 

修改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>
复制代码

 

运行效果如下：

 

 

 

 

总结

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

 

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

 

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

 

返回玩转spring boot系列目录

 

作者：刘冬.NET 博客地址：http://www.cnblogs.com/GoodHelper/ 欢迎转载，但须保留版权

http://www.cnblogs.com/GoodHelper/p/6824562.html

 

文章标签：
Java
Spring
JavaScript
前端开发
PHP
API
中间件
数据格式
XML
关键词：
Spring Boot跨域
Spring boot
ajax跨域
ajax.js跨域
Spring Boot Ajax
developerguy
目录
相关文章
2G冲浪词条
|
26天前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题，javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题，并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先，在Spring Boot应用中添加一个实现了`Filter`接口的类，设置响应头允许所有来源的跨域请求。接着，通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL，验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
2G冲浪词条
35 3
springboot解决js前端跨域问题，javascript跨域问题解决
蓝易云
|
19天前
|
安全 Java 应用服务中间件
SpringBoot：CORS是什么？SpringBoot如何解决跨域问题？
CORS是Web开发中常见且重要的机制，SpringBoot通过提供注解、全局配置和过滤器等多种方式来解决跨域问题。选择适合的方式可以帮助开发者轻松处理跨域请求，提高应用的灵活性和安全性。
蓝易云
44 2
大数据文摘
|
26天前
|
前端开发 安全 Java
springboot解决跨域问题
跨域问题指前端调用与后端接口不在同一域名或端口时产生的安全限制。本文介绍两种在Spring Boot中解决跨域问题的方法：一是通过配置CorsFilter，二是实现WebMvcConfigurer接口。配置完成后重启项目即可生效。作者：博笙困了。来源：稀土掘金。
大数据文摘
44 6
互联网课堂
|
26天前
|
安全 JavaScript Java
SpringBoot解决跨域最佳实践
本文介绍了跨域问题的起因及最佳实践，重点讲解了SpringBoot中如何利用`CorsFilter`解决跨域问题。首先解释了由于浏览器的同源策略限制导致的跨域现象，然后提出了在服务端入口处解决跨域问题的建议，最后详细展示了三种SpringBoot中配置跨域的方法：使用默认配置、自定义配置规则以及通过配置文件管理跨域设置，以适应不同的应用场景。
互联网课堂
43 5
运营研究坊
|
26天前
|
前端开发 安全 JavaScript
SpringBoot 如何解决跨域问题?
本文深入探讨了Spring Boot解决跨域问题的方法，包括全局配置CORS、使用@CrossOrigin注解和自定义过滤器，提供了详细的代码示例和分析，帮助开发者有效应对Web开发中的跨域挑战。
运营研究坊
32 4
蓝易云
|
1月前
|
存储 运维 安全
Spring运维之boot项目多环境(yaml 多文件 proerties)及分组管理与开发控制
通过以上措施，可以保证Spring Boot项目的配置管理在专业水准上，并且易于维护和管理，符合搜索引擎收录标准。
蓝易云
42 2
java冯坚持
|
2月前
|
JavaScript 前端开发 Java
解决跨域问题大集合：vue-cli项目 和 java/springboot(6种方式) 两端解决（完美解决）
这篇文章详细介绍了如何在前端Vue项目和后端Spring Boot项目中通过多种方式解决跨域问题。
java冯坚持
393 1
解决跨域问题大集合：vue-cli项目 和 java/springboot(6种方式) 两端解决（完美解决）
java冯坚持
|
2月前
|
SQL JSON Java
mybatis使用三：springboot整合mybatis，使用PageHelper 进行分页操作，并整合swagger2。使用正规的开发模式：定义统一的数据返回格式和请求模块
这篇文章介绍了如何在Spring Boot项目中整合MyBatis和PageHelper进行分页操作，并且集成Swagger2来生成API文档，同时定义了统一的数据返回格式和请求模块。
java冯坚持
76 1
mybatis使用三：springboot整合mybatis，使用PageHelper 进行分页操作，并整合swagger2。使用正规的开发模式：定义统一的数据返回格式和请求模块
明弟有理想
|
2月前
|
Java 数据库连接 API
springBoot:后端解决跨域&Mybatis-Plus&SwaggerUI&代码生成器 (四)
本文介绍了后端解决跨域问题的方法及Mybatis-Plus的配置与使用。首先通过创建`CorsConfig`类并设置相关参数来实现跨域请求处理。接着，详细描述了如何引入Mybatis-Plus插件，包括配置`MybatisPlusConfig`类、定义Mapper接口以及Service层。此外，还展示了如何配置分页查询功能，并引入SwaggerUI进行API文档生成。最后，提供了代码生成器的配置示例，帮助快速生成项目所需的基础代码。
明弟有理想
154 1
蓝易云
|
2月前
|
缓存 NoSQL Java
Springboot自定义注解+aop实现redis自动清除缓存功能
通过上述步骤，我们不仅实现了一个高度灵活的缓存管理机制，还保证了代码的整洁与可维护性。自定义注解与AOP的结合，让缓存清除逻辑与业务逻辑分离，便于未来的扩展和修改。这种设计模式非常适合需要频繁更新缓存的应用场景，大大提高了开发效率和系统的响应速度。
蓝易云
83 2

热门文章

最新文章

  • 1
    SpringBoot 整合ApiBoot Logging 实现监控打印接口的请求日志
  • 2
    记一次SpringBoot启动异常，jar问题的排查分析
  • 3
    Spring Secure在SpringBoot中的集成
  • 4
    在idea中新建完springboot项目的时候遇到问题(右键没有class选择；控制台报错：Could not transfer artifact org.apache.tomcat.embed:tomcat-embed-core:jar:9.0.60 from/to central ....)
  • 5
    基于springboot+vue的医院预约系统(前后端分离)
  • 6
    Spring Boot常用注解@ConfigurationProperties、松散绑定、数据校验
  • 7
    【SpringBoot WEB 系列】RestTemplate 之自定义请求头
  • 8
    SpringBoot高级篇Redis之Set数据结构使用姿势
  • 9
    java B2B2C Springboot多租户电子商城系统-spring-cloud-eureka-consumer
  • 10
    【SpringBoot】基于 Maven 的 pom.xml 配置详解
  • 1
    Spring高手之路18——从XML配置角度理解Spring AOP
    95
  • 2
    Spring Boot中一般如何使用线程池？
    753
  • 3
    Spring Boot 源码面试知识点
    101
  • 4
    【MongoDB 专栏】MongoDB 与 Spring Boot 的集成实践
    253
  • 5
    深入探索Spring Boot Web应用源码及实战应用
    105
  • 6
    ruoyi-nbcio从spring2.7.18升级springboot到3.1.7，java从java8升级到17（二）
    350
  • 7
    springboot全局自定义异常
    44
  • 8
    RabbitMQ的springboot项目集成使用-01
    147
  • 9
    什么是Spring Boot 自动配置？
    60
  • 10
    Spring cloud原理详解
    79

    • 相关课程

    更多
  • Ajax 前端开发入门与实战
  • Java Web开发系列课程 - Spring框架入门
  • Spring Boot 2.5.x开发实战
  • Springboot项目云开发快速迁移
  • Spring Cloud微服务架构设计与开发实战
  • Ajax入门

    • 相关电子书

    更多
  • 云栖社区特邀专家徐雷Java Spring Boot开发实战系列课程（第20讲）：经典面试题与阿里等名企内部招聘求职面试技巧
  • 微服务架构模式与原理Spring Cloud开发实战
  • 阿里特邀专家徐雷Java Spring Boot开发实战系列课程（第18讲）：制作Java Docker镜像与推送到DockerHub和阿里云Docker仓库

    • 相关实验场景

    更多
  • Spring-cloud-bus-rocketmq入门与实践
  • 从零搭建Spring Boot的Hello World
    • 下一篇
    DataWorks