跨域了怎么办？No 'Access-Control-Allow-Origin' header is present on the requested resource！

跨域问题详解：原因、解决方案和配置示例

跨域是什么？

在前端开发中，跨域是一个常见问题。它指的是由于浏览器安全限制，来自不同源的网页或脚本无法访问或读取彼此的资源。

跨域产生原因

为了保护用户数据，浏览器实施了同源策略。同源是指两个网页或脚本具有相同的协议、域名和端口号。如果不同，就会产生跨域。

跨域解决方案

解决跨域问题的常用方法包括：

• CORS（跨域资源共享）： 服务器通过 HTTP 头部指定哪些源可以访问其资源。
• JSONP（JSON with Padding）： 利用<script>标签跨域加载资源。
• 代理服务器： 作为中间人转发跨域请求。
• WebSocket： 双向通信协议，不受跨域限制。
• Service Worker： 可拦截和处理网络请求，规避跨域限制。

跨域配置示例

以 Nginx + Tomcat + Spring Boot + Vue 项目为例，跨域配置步骤如下：

Nginx 配置

location /api {
    proxy_pass http://localhost:8080/api;
    proxy_set_header Access-Control-Allow-Origin *;
    proxy_set_header Access-Control-Allow-Methods GET, POST, PUT, DELETE, OPTIONS;
    proxy_set_header Access-Control-Allow-Headers Content-Type, Authorization;
}

Spring Boot 配置

@Bean
public CorsConfigurationSource corsConfigurationSource() {
    CorsConfiguration configuration = new CorsConfiguration();
    configuration.setAllowedOrigins(Arrays.asList("*"));
    configuration.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "DELETE", "OPTIONS"));
    configuration.setAllowedHeaders(Arrays.asList("Content-Type", "Authorization"));
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", configuration);
    return source;
}

Vue 配置

axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*';

完成上述配置后，跨域问题即可得到解决。

常见问题解答

• 什么是同源策略？
  它限制了不同源的网页或脚本的交互，以保护用户数据安全。
• 为什么跨域会成为问题？
  它阻碍了前端与后端交互、跨域资源加载等操作。
• 如何选择跨域解决方案？
  根据项目需求和技术栈选择最合适的解决方案。
• CORS 是如何工作的？
  它允许服务器通过 HTTP 头部指定可以访问其资源的源。
• JSONP 存在哪些缺点？
  它仅适用于获取 JSON 数据，并且容易受到 JSON 劫持攻击。