脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → java → Java前后端分离跨域

Java前后端分离项目跨域问题解决方案

 更新时间：2024年03月12日 09:02:54   作者：庄周de蝴蝶  
本文主要介绍了Java前后端分离项目跨域问题解决方案,其中后端基于SpringBoot,前端使用了jQuery、axios等框架,具有一定的参考价值,感兴趣的可以了解一下

前言

本文将讲解前后端项目中跨域问题的常见解决方案，其中后端基于SpringBoot，前端使用了jQuery、axios等框架用于实战代码的讲解。本文将不涉及跨域的解释和SpringBoot等框架，或者是Nginx的使用，将主要讲解前后端分离项目中跨域问题的解决，不过如果你遇到了问题，也欢迎一起交流学习。

跨域解决

JSONP方式

这种方式只能用于Get请求，因此如果需要以Post请求方式获取数据，则可以先看后面CORS解决方式，以下就讲解两种基于JSONP原理的解决方案，首先先看后端的接口：

@RestController
@RequestMapping("/api/customer")
public class HelloController {

    @GetMapping("/getAllCustomerInfo")
    public String getAllCustomerInfo() {
        // 返回的数据必须包含在 getAllCustomerInfo() 字符串中
        // 以便在返回到前端后，可以自动执行回调函数，获取数据
        // getAllCustomerInfo() 与前端的回调函数名对应
        return "getAllCustomerInfo(" + getCustomerList() + ")";
    }

    private String getCustomerList() {
        List<Customer> list = new ArrayList<>(Arrays.asList(
                new Customer(1, "张三", "123456"),
                new Customer(2, "李四", "654321"),
                new Customer(3, "王五", "123123")
        ));
        return new Gson().toJson(list);
    }

}

下面就来分别讲解以下两种方式的解决方案：

js原生解决方案

// 首先设置 src 并将结点添加到 <head> 中
const script = document.createElement('script')
script.src = 'http://localhost:8080/api/customer/getAllCustomerInfo'
document.head.appendChild(script)

// 回调函数名与接口中返回的名字对应
const getAllCustomerInfo = res => {
	console.table(res, ['id', 'username', 'password'])
}

通过以上设置就可以在Console中看到以下结果：

image-20200915142859045

jQuery的ajax解决方案

// 记得需要引入 jQuery
<script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>

$.ajax({ 
	url: 'http://localhost:8080/api/customer/getAllCustomerInfo', 
	type: 'get', 
	dataType: 'jsonp', 
	jsonpCallback: "getAllCustomerInfo"
})

// 回调函数同上
const getAllCustomerInfo = res => {
	console.table(res, ['id', 'username', 'password'])
}

CORS解决方案

跨域资源共享(CORS) 是一种机制，它使用额外的 HTTP 头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，资源会发起一个跨域 HTTP 请求，详细解释请看链接。

后端接口中进行设置

通过利用CORS，我们在前端只需要利用正常的ajax请求方式即可，无需再设置回调函数，在这里我们使用了axios，在展示后端代码之前，我们先看后端代码的改变，为了区别于JSONP只能进行Get请求，我们这里将接口改成了Post：

@RestController
@RequestMapping("/api/customer")
public class HelloController {

    @PostMapping("/getAllCustomerInfo")
    public List<Customer> getAllCustomerInfo(HttpServletResponse response) {
        // 设置响应头
        response.setHeader("Access-Control-Allow-Origin", "*");
        // 不再需要将结果放在回调函数中
        return new ArrayList<>(Arrays.asList(
                new Customer(1, "张三", "123456"),
                new Customer(2, "李四", "654321"),
                new Customer(3, "王五", "123123")
        ));
    }

}

然后前端代码直接使用ajax请求即可：

// 首先需要引入 axios
<script src="https://cdn.staticfile.org/axios/0.1.0/axios.js"></script>

axios.post('http://localhost:8080/api/customer/getAllCustomerInfo')
	.then(res => {
		console.table(res, ['id', 'username', 'password'])
	})

Nginx反向代理

关于反向代理的知识，这里不做详细解析，感兴趣的话，可以查看该链接。通过使用Nginx的反向代理，我们在后端接口中就可以去掉响应头的代码设置：

@RestController
@RequestMapping("/api/customer")
public class HelloController {

    @PostMapping("/getAllCustomerInfo")
    public List<Customer> getAllCustomerInfo() {
        return new ArrayList<>(Arrays.asList(
                new Customer(1, "张三", "123456"),
                new Customer(2, "李四", "654321"),
                new Customer(3, "王五", "123123")
        ));
    }

}

然后是nginx.conf中的修改：

server {
	# 监听80端口, 前端不再直接访问8080端口, 改为访问80端口即可
    listen       80;
    server_name  localhost;

    location / {
        root   html;
        # 添加头
        add_header Access-Control-Allow-Origin *;
        # 代理转发到8080后端端口
        proxy_pass http://localhost:8080;
        index  index.html index.htm;
    }
}

然后再将前端中访问的接口修改为80：

// 首先需要引入 axios
<script src="https://cdn.staticfile.org/axios/0.1.0/axios.js"></script>

// 80为 http 默认端口，可省略
axios.post('http://localhost/api/customer/getAllCustomerInfo')
             .then(res => {
                console.table(res, ['id', 'username', 'password'])
             })

然后开启Nginx服务器，Console中再次出现了我们想看到的结果：

image-20200915150523876

总结

本文并没有包括跨域问题的所有解决方案，不过相信对于大部分的跨域问题，都已经可以解决了，本文在之后也可能会继续更新，讲解更多种解决跨域问题的方法

到此这篇关于Java前后端分离项目跨域问题解决方案的文章就介绍到这了,更多相关Java前后端分离跨域内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • java对数据库更新的操作方式及注意事项

    java对数据库更新的操作方式及注意事项

    这篇文章主要介绍了java对数据库更新的操作方式及注意事项,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-04-04
  • Java日常练习题,每天进步一点点(7)

    Java日常练习题,每天进步一点点(7)

    下面小编就为大家带来一篇Java基础的几道练习题(分享)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望可以帮到你
    2021-07-07
  • Spring Boot 整合 ShedLock 处理定时任务重复执行的问题小结

    Spring Boot 整合 ShedLock 处理定时任务重复执行的问题小结

    ShedLock是解决分布式系统中定时任务重复执行问题的Java库,通过在数据库中加锁,确保只有一个节点在指定时间执行任务,它与SpringScheduler、Quartz等框架结合使用,本文介绍Spring Boot 整合 ShedLock 处理定时任务重复执行的问题,感兴趣的朋友一起看看吧
    2025-02-02
  • Mybatis实体类对象入参查询的笔记

    Mybatis实体类对象入参查询的笔记

    这篇文章主要介绍了Mybatis实体类对象入参查询的笔记，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-06-06
  • 使用Java快速搭一个可用的Agent的完整实例

    使用Java快速搭一个可用的Agent的完整实例

    很多人第一次接触Agent框架,容易把它理解成更复杂一点的模型SDK,但真正进入业务场景后,你会发现问题根本不在怎么调模型,而在怎么让模型稳定地参与业务流程,这篇文章从Java开发者视角出发,介绍AgentScope是什么、适合解决什么问题,需要的朋友可以参考下
    2026-03-03
  • Spring Bean管理注解方式代码实例

    Spring Bean管理注解方式代码实例

    这篇文章主要介绍了Spring Bean管理注解方式代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-03-03
  • Java中十六进制和十进制之间互相转换代码示例

    Java中十六进制和十进制之间互相转换代码示例

    这篇文章主要给大家介绍了关于Java中十六进制和十进制之间互相转换的相关资料,我们项目过程中总是要用到十进制与十六进制相互转换的方法,需要的朋友可以参考下
    2023-07-07
  • Spring框架原理之实例化bean和@Autowired实现原理方式

    Spring框架原理之实例化bean和@Autowired实现原理方式

    这篇文章主要介绍了Spring框架原理之实例化bean和@Autowired实现原理方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-05-05
  • 全面解析Java中的GC与幽灵引用

    全面解析Java中的GC与幽灵引用

    一般的应用程序不会涉及到 Reference 编程， 但是了解这些知识会对理解 GC 的工作原理以及性能调优有一定帮助，在实现一些基础性设施比如缓存时也可能会用到，希望本文能有所帮助
    2013-09-09
  • Java编程之文件读写实例详解

    Java编程之文件读写实例详解

    这篇文章主要介绍了Java编程之文件读写的方法,结合实例形式较为详细的分析了Java文件读写所涉及的类及相应的操作技巧,需要的朋友可以参考下
    2015-12-12

最新评论