IT评测·应用市场-qidao123.com

标题: 跨域题目表明及前后端解决方案（SpringBoot） [打印本页]

作者: 李优秀 时间: 2025-1-26 12:40
标题: 跨域题目表明及前后端解决方案（SpringBoot）
一、题目引出

偶然,控制台出现如下题目。

二、为什么会有跨域

2.1浏览器同源策略

浏览器的同源策略 （ Same-origin policy ）是一种告急的安全机制，用于限制一个源（ origin ）的文档或
脚本如何与另一个源的资源进行交互。这个策略防止了恶意网站读取其他站点上的敏感数据。
例如：被钓鱼网站网络信息，利用 AJAX 发起恶意请求，传递转账信息给银行服务器

作用： 保护浏览器中网站的安全，限制 AJAX 只能向同源 URL 发起请求
源： Web 网页内容的源由用于访问它的 URL 的方案（协议）、 主机名 （域名）和端口三部分组成。只
有当协议、主机和端口都匹配时，两个对象才具有雷同的源。
同源： 网页加载时所在源，和 AJAX 请求时的源（协议，域名，端口号）全部雷同即为同源。
三、什么是跨域

跨域： 从 一个源 的文档 / 脚本，加载 另一个源 的资源就产生了跨域。
例如：网页所在源和 AJAX 访问的源（协议，域名，端口）有一个差别，就发生了跨域访问，请求响应
是失败的。

四、后端解决方案

4.1****方案一：局部配置

CORS （后端） 采用 CORS （跨域资源共享），一种基于 HTTP 头的机制 ，该机制通过允许服务器标示除了它自己
以外的其他源（域、协议或端口），使得浏览器允许这些源访问加载自己的资源。
后端：设置 Access-Control-Allow-Origin 响应头字段，允许除了它自己以外的源来访问自己
的资源
前端：正常发起 AJAX 请求，无需额外操作
直接在控制器大概特定的方法上利用 @CrossOrigin 注解来为单个 API 接口添加 CORS 支持

4.2、方案二：全局配置

新增 config 包，在 config 包下新建 CorsConfig 配置类

@Configuration
public class CorsConfig implements WebMvcConfigurer {
/**
* 跨域处理
*
* @param registry
*/
@Override
public void addCorsMappings(CorsRegistry registry) {
// 所有接口
registry.addMapping("/**")
// 所有源
.allowedOrigins("*")
// .allowedOrigins("http://localhost:3000")
// 允许的方法
.allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
// 允许的请求头
.allowedHeaders("*");
// 是否允许携带 Cookie 等凭证信息
// .allowCredentials(true);
}
}

复制代码

注意：如果同时设置了 allowedOrigins(“*”) 并开启了 allowCredentials(true) ，这是不安
全的做法，因为这允许任何来源携带根据访问 API 。浏览器出于安全思量，大概会拒绝这种设置。
五、前端解决方案

在开发环境中， 可以利用 vue-cli 内置的 署理功能 来解决跨域题目。在项目标 vue.config.js 文件
中添加如下配置：

// 开发环境代理配置
proxy: {
'/api': {
// 后端访问基础路径
target: 'http://localhost:8080',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}

复制代码

同时，修改 request.js 里的基础访问路径

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/)