Java前后端分离项目跨域问题解决方案
前言
本文将讲解前后端项目中跨域问题的常见解决方案，其中后端基于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中看到以下结果：
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中再次出现了我们想看到的结果：
总结
本文并没有包括跨域问题的所有解决方案，不过相信对于大部分的跨域问题，都已经可以解决了，本文在之后也可能会继续更新，讲解更多种解决跨域问题的方法
到此这篇关于Java前后端分离项目跨域问题解决方案的文章就介绍到这了,更多相关Java前后端分离跨域内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在本篇文章里小编给大家整理的是一篇关于springboot容器启动事件相关知识点，需要的朋友们学习下。2019-10-10
这篇文章主要介绍了Java 线程池详解及创建简单实例的相关资料,需要的朋友可以参考下2017-02-02
SpringBoot+Elasticsearch实现数据搜索的方法详解
Elasticsearch是一个基于Lucene的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎，基于RESTful web接口。本文将利用SpringBoot整合Elasticsearch实现海量级数据搜索，需要的可以参考一下2022-05-05
Java DecimalFormat 保留小数位及四舍五入的陷阱介绍
这篇文章主要介绍了Java DecimalFormat 保留小数位及四舍五入的陷阱，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2021-10-10
这篇文章主要介绍了简单了解SPRINGIOC的底层原理演变过程,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-10-10
这篇文章主要介绍了SpringBoot下实现session保持方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
在开发中,有时需要获取Java类的属性注释,尤其是当JPA生成的表缺少注释时,可以通过jdk自带的tools.jar工具包来实现,方法类似于生成javadoc文档,需要在pom.xml文件中导入tools.jar的依赖,该jar文件一般位于JAVA_HOME/lib目录下2024-09-09
Spring boot中使用ElasticSearch的方法详解
这篇文章主要给大家介绍了关于Spring boot中使用ElasticSearch的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-01-01
Java自带定时任务ScheduledThreadPoolExecutor实现定时器和延时加载功能
今天小编就为大家分享一篇关于Java自带定时任务ScheduledThreadPoolExecutor实现定时器和延时加载功能，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2018-12-12
这篇文章主要介绍了解决java转义json出现\u0000 等乱码的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2021-03-03
最新评论