跨域题目表明及前后端解决方案（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 配置类

1. @Configuration
2. public class CorsConfig implements WebMvcConfigurer {
3.     /**
4.     * 跨域处理
5.     *
6.     * @param registry
7.     */
8.     @Override
9.     public void addCorsMappings(CorsRegistry registry) {
10.         // 所有接口
11.          registry.addMapping("/**")
12.                 // 所有源
13.                 .allowedOrigins("*")
14.                 // .allowedOrigins("http://localhost:3000")
15.                 // 允许的方法
16.                 .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
17.                 // 允许的请求头
18.                 .allowedHeaders("*");
19.                 // 是否允许携带 Cookie 等凭证信息
20.                 // .allowCredentials(true);
21.     }
22. }

复制代码

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

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

1. // 开发环境代理配置
2. proxy: {
3.     '/api': {
4.         // 后端访问基础路径
5.         target: 'http://localhost:8080',
6.         changeOrigin: true,
7.         pathRewrite: {
8.         '^/api': ''
9.         }
10.     }
11. }

复制代码

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

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