编写差旅报销管理系统过程中遇到的跨域问题的解决办法

前后端跨越问题通常涉及到多个方面，以下是对这些问题的详细描述：

• 跨域资源共享（CORS）
  • 问题描述：由于浏览器的同源策略限制，前端页面在向不同源（协议、域名、端口号有一个不同即为不同源）的后端服务器发起 AJAX 请求时，会被浏览器拦截，导致请求无法正常发送或接收响应数据。例如，前端页面部署在 http://localhost:3000，而后端接口在 http://api.example.com:8080，这种情况下就会出现跨域问题。
  • 影响：阻止了前端与不同源后端的直接通信，使得很多依赖 AJAX 获取数据并进行动态交互的功能无法正常实现，严重影响了前后端分离架构下的开发和数据交互效率。
  • 解决方案：后端服务器可以通过设置响应头来允许特定源的跨域请求，如设置 Access-Control-Allow-Origin 头为前端页面的源地址；或者使用 JSONP（JSON with Padding）技术，但 JSONP 只适用于 GET 请求，且存在安全风险；还可以通过代理服务器转发请求，使浏览器认为请求是同源的，从而绕过跨域限制。
• 前端路由与后端路由的冲突
  • 问题描述：在单页应用（SPA）中，前端使用路由来实现页面的无刷新切换和状态管理，而后端也有自己的路由系统用于处理不同的 URL 请求并返回相应的页面或数据。当两者配置不当时，可能会出现前端路由的路径被后端错误地拦截或处理，导致页面无法正确显示或功能异常。例如，前端使用 Vue Router 定义了 /user/profile 的路由，但后端也有一个类似的路由规则，可能会导致前端路由的页面无法正常加载。
  • 影响：导致页面跳转异常、资源加载错误、用户体验不佳，甚至可能出现数据泄露或安全漏洞，因为用户可能意外地访问到后端未授权的页面或接口。
  • 解决方案：合理规划前后端的路由路径，避免冲突。可以采用约定的方式，如后端路由处理所有以 /api 开头的请求，将其作为接口路径，而前端路由处理其他页面路径；或者在后端配置中，对前端路由的路径进行放行，使其能够正常转发到前端应用进行处理。
• 数据格式与接口设计的匹配
  • 问题描述：前端和后端开发人员可能对数据的格式和接口设计有不同的理解和实现方式。前端可能期望接收特定格式的数据（如 JSON 格式且包含某些特定字段），而后端返回的数据格式可能与之不匹配，导致前端在解析数据时出现错误。例如，前端需要一个包含 user 对象且其中有 name、age、email 字段的 JSON 数据，但后端返回的数据结构可能不一致，缺少某些字段或使用了不同的命名方式。
  • 影响：增加了前端解析数据的难度和出错概率，可能导致页面显示异常、数据无法正确绑定到页面元素上，影响应用的功能和用户界面的展示效果。
  • 解决方案：前后端开发人员应提前进行沟通和约定，制定统一的数据格式规范和接口设计文档。后端按照约定的格式返回数据，前端也按照相应的格式进行解析和处理，确保数据的一致性和准确性。同时，在开发过程中，遇到数据格式问题应及时沟通并调整，避免问题积累。
• 性能优化的协同问题
  • 问题描述：前后端都需要对应用的性能进行优化，但各自的优化策略可能相互影响。例如，前端为了提高页面加载速度，可能采用代码压缩、图片优化、懒加载等技术，但后端如果响应时间过长或接口性能不佳，仍然会影响整体性能；反之，后端进行了数据库查询优化、缓存设置等操作，但前端代码存在内存泄漏或不合理的资源加载方式，也会使性能提升不明显。
  • 影响：导致应用的整体性能无法达到预期的优化效果，用户可能仍然会遇到页面加载缓慢、操作卡顿等问题，影响用户的满意度和应用的竞争力。
  • 解决方案：前后端开发人员需要协同工作，共同进行性能分析和优化。建立性能监控机制，及时发现性能瓶颈所在，然后根据具体情况制定综合的优化方案。前端可以关注页面资源加载顺序、减少不必要的网络请求、优化页面渲染等；后端可以优化数据库查询语句、合理设置缓存策略、优化服务器配置等，通过前后端的共同努力，提升应用的整体性能。
• 安全问题的跨越
  • 问题描述：安全漏洞可能存在于前后端的多个环节，且相互关联。前端可能存在跨站脚本攻击（XSS）、跨站请求伪造（CSRF）等风险，而后端可能面临 SQL 注入、权限管理漏洞等问题。如果前端没有对用户输入进行严格的验证和过滤，可能会将恶意数据传递给后端，导致后端遭受攻击；同样，后端如果在权限验证方面存在缺陷，可能会使前端的安全防护措施失效，攻击者得以获取未授权的信息或执行非法操作。
  • 影响：一旦发生安全问题，可能会导致用户数据泄露、系统被篡改、服务中断等严重后果，给用户和企业带来巨大的损失，同时也会损害企业的声誉和信誉。
  • 解决方案：前后端都需要加强安全意识，采取相应的安全措施。前端要对用户输入进行严格的验证和过滤，避免将不安全的数据发送到后端；使用安全的编码实践，防止 XSS 和 CSRF 攻击，如对用户输入进行转义、设置合适的 CSP（Content Security Policy）等。后端要对输入参数进行严格的校验，防止 SQL 注入攻击；加强权限管理，确保每个接口和操作都有正确的权限验证机制；对敏感数据进行加密存储和传输，保护用户隐私。同时，前后端要定期进行安全审计和漏洞扫描，及时发现并修复潜在的安全问题，形成一个全方位、多层次的安全防护体系。
    以上是我搜集到的有关跨域问题的描述。
    在编写差旅报销管理系统过程中我遇到了跨域问题
    一种解决办法就是：
    在controller层的代码前加上@CrossOrigin能够解决以上问题。
    第二种方法是在controller层新建一个实体类CorConfig,在实体类中添加如下代码：

package com.example.day1225.controller;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:63342")//前端应用部署的代码
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*");
    }
}