跨域请求真的很简单，一文教你轻松应对 CORS 问题

最新推荐文章于 2025-11-17 16:56:57 发布

原创最新推荐文章于 2025-11-17 16:56:57 发布 · 889 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#网络协议

计算机网络专栏收录该内容

11 篇文章

订阅专栏

1. 什么是 CORS（跨域资源共享）

CORS（Cross-Origin Resource Sharing） 是一种浏览器的安全特性，它允许网页从不同源的服务器加载资源。如果没有适当的 CORS 配置，浏览器会阻止跨域请求，以避免潜在的安全问题。

2. 常见的跨域请求类型

简单请求：直接发起的请求，满足特定条件（如请求头不带自定义头部等），不会触发预检请求。
复杂请求：请求包含了特定的 HTTP 方法（如 PUT、DELETE）或自定义的请求头部（如 Authorization），浏览器会发起预检请求（OPTIONS）。

3. 后端 CORS 配置

跨域请求的核心是服务器的 CORS 配置。后端需要在响应中添加一些头部，来允许跨域请求。

主要的 CORS 头部：

Access-Control-Allow-Origin: 指定允许访问的域。如果设置为 *，表示任何域都可以访问资源。
Access-Control-Allow-Methods：指定允许的 HTTP 方法（如 GET、POST、PUT、DELETE、OPTIONS）。
Access-Control-Allow-Headers：指定允许的请求头部（如 Content-Type、Authorization、Api-Auth 等）。
Access-Control-Allow-Credentials：设置是否允许发送认证信息（如 Cookies）。如果为 true，必须明确指定 Access-Control-Allow-Origin，而不能使用 *。
Access-Control-Max-Age：指定预检请求的结果缓存时间（以秒为单位），浏览器在这段时间内不会再次发起预检请求。

4. 前端配置

前端需要设置withCredentials: true (axios)来发送携带凭证的请求（如 cookies 或授权头）。

5. 使用 curl 测试 CORS 配置

可以使用 curl 来模拟跨域请求，验证后端是否正确返回 CORS 响应头,以此来确定是前端配置出现问题还是后端配置的问题。

curl -X OPTIONS -I http://localhost:8002/admin/Login/index

6. 常见问题及解决方案

问题 1：CORS 错误：Cross origin requests are only supported for protocol schemes: chrome, chrome-extension, chrome-untrusted, data, http, https, isolated-app.

在这里插入图片描述

问题描述：跨域请求只支持http,https协议，请求后端url时必须指明协议类型。
解决方案：检查前端的apiUrl是否携带http协议或者https协议。

问题 2：CORS 错误：Request header field <header> is not allowed by Access-Control-Allow-Headers

在这里插入图片描述

问题描述：浏览器提示某个自定义请求头（如 api-auth）未被允许。
解决方案：在后端的 Access-Control-Allow-Headers 中明确添加需要的自定义请求头。

header("Access-Control-Allow-Headers: Content-Type, Authorization, Api-Auth");

问题 3：CORS 错误：Access-Control-Allow-Origin 必须指定具体的域名

问题描述：如果请求包含了凭证（如 cookies），例如在axios 中配置了 withCredentials: true则后端响应头中的 Access-Control-Allow-Origin 不能是 *，必须指定一个具体的域名。

解决方案：确保后端配置了正确的 Access-Control-Allow-Origin，例如：

header("Access-Control-Allow-Origin: http://localhost:8082");  // 设置具体的前端域名

问题 4：CORS 错误：The value of the ‘Access-Control-Allow-Origin’ header must not be ‘*’ when the request’s credentials mode is ‘include’

问题描述：如果请求的 credentials mode 为 include（即携带凭证），后端的 Access-Control-Allow-Origin 不能是 *，必须是具体的域名。
解决方案：确保后端返回的 Access-Control-Allow-Origin 是具体的域名，而不是 *。