跨域问题解释及前后端解决方案（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 里的基础访问路径