【知识图谱】开发经验记录：CORS（跨域资源共享）问题

尝试前后端交互时出现了这样的报错 ：
Access to XMLHttpRequest at 'http://localhost:8080/api/courses' from origin 'http://localhost:8081' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

这个错误是典型的 CORS（跨域资源共享） 问题。这是前后端分离的项目在开发中无法回避的问题，当你的前端应用在 http://localhost:8081 上运行，而你在请求 http://localhost:8080/api/courses 时，由于浏览器的同源策略（详见注释），它阻止了跨域请求，因为响应中缺少 Access-Control-Allow-Origin 头。下面对几种主流的解决方法进行记录，开发者可根据实际情况选用最适合自己项目特性的方法。

解决方法

1. 后端服务器（localhost:8080）添加 CORS 支持

如果你控制的是后端（如 Spring Boot），你需要配置它来允许跨域请求。

Spring Boot 示例：

在 Spring Boot 中，你可以通过添加一个 @CrossOrigin 注解来允许跨域请求，或者通过全局配置来启用 CORS。

方法 1：使用 @CrossOrigin 注解（针对特定的 Controller 或方法）

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@CrossOrigin(origins = "http://localhost:8081")  // 允许来自 http://localhost:8081 的请求
@RequestMapping("/api/courses")
public class CourseController {

    @RequestMapping
    public List<Course> getCourses() {
        // 你的代码逻辑
    }
}

• 你可以设置 origins 为前端的地址，例如 http://localhost:8081，以允许来自这个来源的请求。

方法 2：全局配置 CORS（适用于所有 Controller）（推荐）

你也可以通过在 Spring Boot 配置类中添加一个全局的 CORS 配置来允许所有端口的跨域请求。创建一个新的类，例如 WebConfig.java，并实现 WebMvcConfigurer 接口来配置 CORS。

    import org.springframework.context.annotation.Bean;
    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 WebConfig implements WebMvcConfigurer {
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/api/**")  // 为 /api/** 路径的请求添加跨域配置
                    .allowedOrigins("http://localhost:8081")  // 允许来自 http://localhost:8081 的请求
                    .allowedMethods("GET", "POST", "PUT", "DELETE")
                    .allowedHeaders("*");
        }
    }

这将允许来自 http://localhost:8081 的请求访问所有以 /api/ 开头的接口。

（1） 解释代码：

• @Configuration：标注这个类为配置类，让 Spring Boot 知道它需要被加载。
• addMapping("/api/**")：为所有以 /api/ 开头的请求添加 CORS 配置。
• allowedOrigins("http://localhost:8081")：只允许来自 http://localhost:8081 的请求。如果你的前端应用是运行在这个地址上，这一行配置允许跨域请求。如果你的前端应用运行在其他地址，记得修改这个地址。
• **allowedMethods("GET", "POST", "PUT", "DELETE")**：允许的 HTTP 请求方法，可以根据你的实际需要添加或减少。
• allowedHeaders("*")：允许所有的请求头。

（2） 将该配置类添加到你的项目中

将这个配置类 (WebConfig.java) 放在项目的 src/main/java 目录下的适当包中

2. 前端（Vue.js）配置代理（开发环境）

如果你不想修改后端，可以在前端开发中使用 代理 来解决 CORS 问题。这样，当你请求 API 时，实际上是通过代理访问后端，避免了跨域问题。

在 Vue 项目中配置代理：

如果你是通过 Vue CLI 创建的项目，可以在 vue.config.js 中配置开发服务器的代理。 module.exports = { devServer: { proxy: { ‘/api’: { target: ‘http://localhost:8080’, // 后端 API 地址 changeOrigin: true, // 修改请求头中的 origin 字段 secure: false, // 如果请求的是 https 接口，设置为 true }, }, }, };

通过这种方式，Vue 的开发服务器将会代理所有 /api 开头的请求到 http://localhost:8080，并且避免了跨域问题。

3. 使用 CORS 中间件（如果使用 Node.js 或其他后端框架）

如果你使用的是 Node.js 和 Express，可以使用 CORS 中间件 来解决跨域问题。

首先，安装 CORS 中间件： npm install cors

然后，在 Express 中使用 CORS 中间件：

const express = require('express'); 
const cors = require('cors'); 
const app = express(); // 允许来自 http://localhost:8081 的请求
app.use(cors({ 
     origin: 'http://localhost:8081',
})); 
app.get('/api/courses', (req, res) => {
     res.json({ courses: [] }); 
});

---

注释：浏览器的同源策略：

同源策略 (Same-Origin Policy) 是一种重要的浏览器安全机制，它限制了不同源的网页之间的交互，目的是防止恶意网站访问用户的敏感信息或执行不受信任的操作。

什么是“源”？

一个“源”是由 协议（例如 http 或 https）、域名（例如 localhost 或 example.com）和 端口（例如 8080）组成的。也就是说，浏览器会通过这三者来判断是否属于同一个源。

• 同源：如果两个 URL 的协议、域名和端口都相同，那么它们就是同源的。
  • 示例：http://localhost:8080 和 http://localhost:8080 是同源的。
• 不同源：如果两个 URL 的协议、域名或端口有任何不同，则它们属于不同的源。
  • 示例：http://localhost:8080 和 http://localhost:8081 是不同源的。

为什么会有同源策略？

同源策略的目的是 防止跨站点脚本攻击 (XSS) 和 跨站请求伪造 (CSRF) 等安全漏洞。例如，当你登录到某个网站后，如果同源策略没有生效，恶意网站就可能读取你在当前网站的登录状态（如 cookie），然后伪装成你发起不必要的请求。

例子

假设你有一个 Vue 前端应用正在 http://localhost:8081 上运行，而你的后端 API 在 http://localhost:8080 上。这两个地址属于 不同源，所以前端尝试从 http://localhost:8081 访问后端 http://localhost:8080 的 API 时，就会触发同源策略，浏览器会拒绝该请求并抛出 CORS 错误。

解决同源策略问题的办法

因为同源策略的限制，跨域请求（例如前端从一个源请求后端接口）默认是被阻止的。但是，有些情况下你可能希望允许跨源的请求，这时就需要使用 CORS（跨域资源共享）。

CORS（跨域资源共享）

CORS 是一种机制，允许服务器声明哪些源（如某个域名或端口）可以访问它的资源。当浏览器发出跨域请求时，服务器会在响应头中添加一些特定的 CORS 头部信息，告知浏览器是否允许这个请求。

例如，服务器响应头中可能会包含以下内容： Access-Control-Allow-Origin: http://localhost:8081

这意味着，来自 http://localhost:8081 的请求是被允许的，浏览器将继续处理这个请求，而不是阻止它。

综述

• 同源策略 是一种浏览器的安全机制，防止不同源的网页之间不受控制地交互。
• 跨源请求（如前端和后端在不同端口运行时）会被浏览器阻止。
• 解决跨域问题的一种方法是使用 CORS，通过服务器在响应头中添加允许跨域的设置，来使得浏览器允许跨源请求。

持续更新开发流程、技术栈学习路线和资源等内容，欢迎关注！