前言

爪哇岛语言在多数时，会作为一个后端语言，为前端的php，node.js等提供应用程序接口接口。前端通过创建交互式、快速动态网页应用的网页开发技术请求去调用爪哇岛的应用程序接口服务。今天以node.js为例，介绍两种跨域方式：CrossOrigin和反向代理。

一、准备工作

pom.xml:

？可扩展标记语言版本='1.0 '编码='UTF-8 '？项目xmlns=' http://aven。阿帕奇。org/POM/4。0 .0 ' xmlns : xsi=' http://www。w3。org/2001/XMLSchema-instance ' xsi 3360 schema location=' http://aven。阿帕奇。org/POM/4。0 .0 http://maven.apache.org/xsd/maven-4.0.0.xsd'车型版本4。0 .0/型号版本groupIdcom.example/groupId artifactIdspring-Boot-15/artifactId版本0。0 .1-从存储库查找父项/父项属性项目。建造。sourceencodingutf-8/项目。建造。sourceencoding项目。报道。output en coding TF-8/项目。报道。输出Java编码。1.8版本/Java。版本/属性依赖关系依赖关系groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId/依赖关系groupIdorg.springframework.boot/groupId artifactIdspring-boot-devtools/artifactId scope entime/scope/dependencies groupIdorg.springframework.boot/groupId artifactivity

App.java

package com.exampleimport org。弹簧框架。靴子。弹簧应用；导入组织。弹簧框架。靴子。自动配置。springootpapplication @ springootpapplicationpublic类app { public static void main(String[]args){ spring application。运行(App。类，args)；}}User.java

package com.example公共类用户{ public int id公共字符串名称；公共信息时代；}MainController.java:

package com.example导入Java。乌提尔。ArrayList导入Java。乌提尔。列表；导入组织。弹簧框架。网络。绑定。注释。getmapping导入组织。弹簧框架。网络。绑定。注释。休息控制器；/* * * * * */@ RestControllerpublic类主控制器{ @ GetMapping(' findaluser ')公共列表用户findaluser(){ 0列表用户列表=新数组列表();for(int I=0；I 20i){ 0用户用户=新用户();list.add(用户);用户。id=I；用户。name=' name _ ' I；用户。年龄=20岁；}返回列表；}}项目结构如下图所示：

访问http://localhost :8080/findall user

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

选择EJB模板引擎：

index.ejs文件代码如下：

！' DOCTYPE html html标题%=title %/title link rel='样式表href='/样式表/style。CSS '/脚本src=' http://cdn。bootscs。com/angular。js/1。5 .6/棱角分明。量滴js '/script脚本类型=' text/JavaScript ' var app=angular。模块(' app '，[])；app.controller('MainController '，function($rootScope，$scope，$http) { $http({ method: 'GET '，URL : ' http://localhost :8080/find all user ' }).然后（函数successCallback(r){ $ scope。rows=r . data});});/script/head body ng-app=' app ' ng-controller=' main controller ' h1 %=title %/h1 pWelcome to %=title %/p br/table tr ng-repeat=' row in row ' TD { { row。id } }/TD { { row。name } }/TD { { row。age } }/TD/tr/table/body/html通过angular.js的超文本传送协议(超文本传输协议的缩写)方法调用美国石油学会(美国石油协会)请求

右键运行项目：

运行效果：

发现调用创建交互式、快速动态网页应用的网页开发技术请求时跨域失败。

二、弹簧靴后台设置允许跨域

这时，修改主控制器类，在方法前加@CrossOrigin注解：

/* * * * * */@ RestControllerpublic类主控制器{ @ cross origin(origins=' http://localhost :3000 ')@ GetMapping(' findaluser ')公共列表用户findaluser(){ list用户列表=new ArrayList()；for(int I=0；I 20i){ 0用户用户=新用户();list.add(用户);用户。id=I；用户。name=' name _ ' I；用户。年龄=20岁；}返回列表；}}这是声明查找所有用户方法允许跨域，

也可以修改App.java，来实现全局跨域：

package com.exampleimport org。弹簧框架。靴子。弹簧应用；导入组织。弹簧框架。靴子。自动配置。回弹应用程序；导入组织。弹簧框架。语境。注释。豆；导入组织。弹簧框架。网络。servlet。配置。注释。corsregistry导入组织。弹簧框架。网络。servlet。配置。注释。webmvcconfigurer导入组织。弹簧框架。网络。servlet。配置。注释。webmvcconfiguradapter@回弹应用公共类app { public static void main(String[]args){ spring application。运行(App。类，args)；} @ Bean公共WebMvcConfigurer corsconfightor(){ 0返回新的webmvcconfiguradapter(){ @ Override public void addCorsMappings(CorsRegistry registry){ registry。addmapping('/* * ').allowedOrigins(' http://localhost :3000 ')；} };}}registry.addMapping('/** '):为根目录的全部请求，也可以设置为/user/** '，这意味着是用户目录下的所有请求。

在访问http://localhost:3000，效果如下：

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

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

安装快速-http-代理中间件

国家预防机制安装-保存-开发快速-http-代理

修改app.js文件，使其支持反向代理：

var proxy=require(' express-http-proxy ')；var APi proxy=proxy(' http://localhost :8080 '，{ })；app.use('/api '，ApiProxy)；以"/api "开头的请求转发为板簧罩的应用程序接口服务。

完整代码如下：

/** *模块依赖关系*/var express=require('express ')，routes=require(' ./routes ')，user=require ' ./routes/user ')，http=require('http ')，path=require(' path ')；var app=express()；//all environmentsapp.set('port '，进程。环境。端口| | 3000)；app。set(' view '，_ _ dirname '/view ')；app.set('view engine '，' ejs ')；app。使用(快递。fav图标())；app。使用(快递。记录器(' dev ')；app。使用(快递。body parser())；app。使用(快递。方法重写())；app。使用(app。路由器)；app。使用(快递。静态(路径。join(_ _ dirname，' public '))；//开发仅当(' development '==app。获取(' env '){ app。使用(快递。错误处理程序())；} var proxy=require(' express-http-proxy ')；var APi proxy=proxy(' http://localhost :8080 '，{ })；app.use('/api '，ApiProxy)；app.get('/')路由。索引)；app.get('/users '，user。列表)；http.createServer(应用程序).listen(app.get('port ')，function(){ console。日志('快速服务器侦听端口app。get(' port '))；});修改index.ejs文件：

var app=angular.module('app '，[])；app.controller('MainController '，function($rootScope，$scope，$http) { $http({ method: 'GET '，URL : '/API/findaluser ' }).然后（函数successCallback(r){ $ scope。rows=r . data});});完整的index.ejs文件如下：

！' DOCTYPE html html标题%=title %/title link rel='样式表href='/样式表/style。CSS '/脚本src=' http://cdn。bootscs。com/angular。js/1。5 .6/棱角分明。量滴js '/script脚本类型=' text/JavaScript ' var app=angular。模块(' app '，[])；app.controller('MainController '，function($rootScope，$scope，$http) { $http({ method: 'GET '，URL : '/API/findaluser ' }).然后（函数successCallback(r){ $ scope。rows=r . data});});/script/head body ng-app=' app ' ng-controller=' main controller ' h1 %=title %/h1 pWelcome to %=title %/p br/table tr ng-repeat=' row in row ' TD { { row。id } }/TD { { row。name } }/TD { { row。age } }/TD/tr/table/body/html运行效果如下：

总结

通过反向代理的第二种方式是最好的解决方案。在正式项目中，可以使用node.js来控制web前端呈现和spring boot后端提供的API服务的组合。这样就可以控制用户登录node.js后调用spring boot的API服务.在大型web项目中，还可以使用node.js的反向代理链接多个子网站，充分发挥网站的灵活扩展性。

以上就是边肖介绍的spring boot ajax的两种跨域方式，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！