资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

springbootajax跨域的两种方式

前言

站在用户的角度思考问题，与客户深入沟通，找到阿坝州网站设计与阿坝州网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都网站设计、成都网站制作、企业官网、英文网站、手机端网站、网站推广、域名申请、网站空间、企业邮箱。业务覆盖阿坝州地区。

 java语言在多数时，会作为一个后端语言，为前端的php,node.js等提供API接口。前端通过ajax请求去调用java的API服务。今天以node.js为例，介绍两种跨域方式：CrossOrigin和反向代理。

 一、准备工作

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;
 }
}

项目结构如下图所示：

spring boot ajax跨域的两种方式

访问http://localhost:8080/findAllUser

spring boot ajax跨域的两种方式

使用HBuilder创建node.js express项目：

spring boot ajax跨域的两种方式

选择ejs模板引擎：

spring boot ajax跨域的两种方式

index.ejs文件代码如下：



 
 
  <%= title %>
 
 
 
 
 
 
 
<%= title %>

 
Welcome to
  <%= title %>
 

 

 

  

  {{row.id}}
  {{row.name}}
  {{row.age}}

 通过angular.js的http方法调用api请求

右键运行项目：

spring boot ajax跨域的两种方式

运行效果：

spring boot ajax跨域的两种方式

发现调用ajax请求时跨域失败。

二、spring boot后台设置允许跨域

这时，修改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，来实现全局跨域：

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，效果如下：

spring boot ajax跨域的两种方式

三、通过node.js的方向代理实现跨域

node.js提供了一些反向代理的中间件，能轻而易举的实现跨域，而不需要spring boot做任何设置。

安装express-http-proxy中间件

npm install --save-dev express-http-proxy

spring boot ajax跨域的两种方式

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



  
    
      <%= title %>
    
    
    
    
  
  
    
<%= title %>

    
Welcome to
      <%= title %>
    

    

    

      

        {{row.id}}
        {{row.name}}
        {{row.age}}

运行效果如下：

spring boot ajax跨域的两种方式

总结

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

 以上所述是小编给大家介绍的spring boot ajax跨域的两种方式，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持！


文章标题：springbootajax跨域的两种方式
网站地址：http://cdkjz.cn/article/ijdjio.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

业务热线：400-028-6601 / 大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
成都画册设计公司成都网站制作成都门窗定制bgp多线机房托管重庆网站建设公司成都网站建设成都建站宜宾网站设计成都康明斯发电机注册域名

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询400-028-6601

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图