Java后端已配置跨域，前端代码该怎么写？

前端跨域问题的核心理解

在现代Web开发中，跨域（Cross-Origin Resource Sharing, CORS）是一个绕不开的话题，当前端应用与后端API进行交互时，如果两者的协议、域名或端口存在任何不同，就会触发浏览器的同源策略（Same-Origin Policy），从而阻止跨域请求，Java后端通常通过配置CORS头来解决跨域问题，但前端也需要根据后端的配置进行相应的处理，以确保请求能够正常发送和响应，本文将从前端角度出发，详细讲解如何配合Java后端实现跨域请求，涵盖常见场景、解决方案及最佳实践。

前端跨域请求的常见场景与挑战

前端跨域请求的场景非常广泛，前端部署在https://www.example.com，而后端Java服务部署在https://api.example.com（不同域名）；或前端使用8080端口，后端使用8081端口（不同端口），这些情况下，浏览器会直接拦截请求，导致前端无法获取后端数据。

对于Java后端而言，跨域通常通过设置响应头实现，

• Access-Control-Allow-Origin：允许跨域的源（如https://www.example.com或表示所有源）；
• Access-Control-Allow-Methods：允许的HTTP方法（如GET、POST、PUT等）；
• Access-Control-Allow-Headers：允许的请求头（如Authorization、Content-Type等）；
• Access-Control-Allow-Credentials：是否允许携带凭证（如Cookie）。

但前端仍需注意以下几点：

1. 简单请求与非简单请求的区别：根据HTTP规范，GET、POST或HEAD请求且仅包含特定请求头（如Accept、Content-Type为application/x-www-form-urlencoded）属于简单请求，可直接发送；其他请求（如包含自定义头、Content-Type为application/json）会先发送预检请求（OPTIONS），需后端支持。
2. 携带凭证时的配置：如果前端需要发送Cookie或HTTP认证信息，需设置withCredentials: true，且后端Access-Control-Allow-Origin不能为（必须明确指定源）。

前端跨域请求的实现方案

使用Fetch API处理跨域请求

Fetch API是现代浏览器提供的原生网络请求方法，处理跨域请求时需注意与后端配置的匹配。

示例代码：

// 简单请求示例（GET）
fetch('https://api.example.com/data', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
// 非简单请求示例（POST，携带JSON数据）
fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer token123'  // 自定义请求头
  },
  body: JSON.stringify({ key: 'value' }),
  credentials: 'include'  // 携带Cookie
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

关键点：

• 如果后端允许携带凭证（Cookie），前端需设置credentials: 'include'；
• 如果后端允许的请求头与前端发送的不一致，需确保后端Access-Control-Allow-Headers包含前端自定义的头（如Authorization）。

使用Axios处理跨域请求

Axios是一个流行的HTTP客户端库，对跨域请求提供了更简洁的封装，支持请求拦截、响应拦截等功能。

示例代码：

// 配置Axios默认值
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.withCredentials = true;  // 默认携带凭证
// GET请求
axios.get('/data', {
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  if (error.response) {
    // 请求已发送，但服务器返回状态码不在2xx范围内
    console.error('Error status:', error.response.status);
  } else if (error.request) {
    // 请求已发送，但无响应（可能是跨域被拦截）
    console.error('No response:', error.request);
  } else {
    // 请求配置错误
    console.error('Error message:', error.message);
  }
});
// POST请求（携带自定义头）
axios.post('/data', { key: 'value' }, {
  headers: {
    'Authorization': 'Bearer token123',
    'Content-Type': 'application/json'
  }
})
.then(response => console.log(response.data))
.catch(error => console.error('Error:', error));

关键点：

• Axios默认不发送凭证，需通过withCredentials: true开启；
• 错误处理需区分响应错误（如401、404）和网络错误（如跨域拦截），便于调试。

处理预检请求（OPTIONS）

当前端发送非简单请求时，浏览器会先发送OPTIONS请求询问服务器是否允许跨域，前端无需直接处理OPTIONS请求，但需确保后端正确响应OPTIONS请求，并返回必要的CORS头。

后端Java（Spring Boot）示例配置：

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")  // 匹配所有路径
                .allowedOrigins("https://www.example.com")  // 允许的前端源
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")  // 允许的方法
                .allowedHeaders("*")  // 允许所有请求头
                .allowCredentials(true)  // 允许携带凭证
                .maxAge(3600);  // 预检请求的有效期（1小时）
    }
}

前端注意事项：

• 如果后端未正确配置OPTIONS请求，前端会在发送非简单请求时直接报错（如No 'Access-Control-Allow-Origin' header）；
• 可通过浏览器开发者工具的“Network”面板查看OPTIONS请求的响应头，确认后端是否返回了Access-Control-Allow-Methods和Access-Control-Allow-Headers。

开发环境中的跨域解决方案

在开发阶段，前端通常通过代理服务器解决跨域问题，避免频繁修改后端配置，以Vue CLI和Create React App为例：

Vue CLI配置代理（vue.config.js）：

module.exports = {
  devServer: {
    proxy: {
      '/api': {  // 请求路径以/api开头时触发代理
        target: 'https://api.example.com',  // 后端地址
        changeOrigin: true,  // 修改请求头中的Origin
        secure: false,  // 忽略HTTPS证书验证
        pathRewrite: { '^/api': '' }  // 路径重写（可选）
      }
    }
  }
};

Create React App配置代理（package.json）：

{
  "proxy": "https://api.example.com"
}

关键点：

• 代理仅在开发环境生效，生产环境需依赖后端的CORS配置；
• changeOrigin: true用于处理不同端口或域名的情况，确保请求头中的Origin与后端允许的源一致。

前端跨域请求的最佳实践

1. 明确前后端分工：前端负责请求发送和凭证携带，后端负责CORS头配置，两者需协商好允许的源、方法、请求头及凭证支持。
2. *避免过度依赖`Access-Control-Allow-Origin: *`虽然方便，但不支持携带凭证，生产环境应明确指定前端源，提升安全性。
3. 统一错误处理：在前端封装全局错误拦截器，对跨域错误（如CORS相关）进行友好提示，避免暴露敏感信息。
4. 测试预检请求：在发送非简单请求前，通过工具（如Postman）手动发送OPTIONS请求，验证后端是否正确响应。
5. 环境隔离：开发环境使用代理，测试和生产环境依赖后端CORS配置，避免因环境差异导致的问题。

前端跨域请求的实现需要前后端紧密配合，前端通过Fetch API或Axios发送请求时，需根据后端CORS配置设置credentials、headers等参数；开发环境可通过代理简化调试；生产环境则需确保后端正确处理简单请求、非简单请求及预检请求，理解跨域的核心原理（同源策略、CORS机制）并遵循最佳实践，能够有效解决跨域问题,提升开发效率和用户体验。