Ajax GET请求遇CORS错误：控制台报跨域不允许但网络返回数据

阿华AIGC实验室

2026-5-22

解决CORS不匹配导致的请求拦截问题

看起来你遇到的是典型的**跨域资源共享（CORS）**不匹配问题——哪怕Network面板显示请求已经成功拿到数据，浏览器还是会因为同源策略拦截你的前端JS访问响应结果，这是浏览器的安全机制在起作用。

错误原因拆解

错误提示里说得很明白：

Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value 'https://www.doviz.com' that is not equal to the supplied origin. Origin 'http://www.elli2.com' is therefore not allowed access

目标服务器返回的Access-Control-Allow-Origin头只允许自身域名（https://www.doviz.com）的请求，但你的页面运行在http://www.elli2.com，不仅域名不同，连协议（http vs https）都不一致，浏览器判定这个跨域请求不安全，直接阻止前端代码读取响应内容。

解决方案分两种情况

情况1：你能控制目标服务器（doviz.com）

如果这是你的服务器，调整CORS配置就能解决：

直接把Access-Control-Allow-Origin设置为http://www.elli2.com，精准允许你的源访问
要是需要支持多个合法源，可以让服务器动态读取请求头里的Origin，并把它作为Access-Control-Allow-Origin的值返回（记得做白名单校验，避免随便开放权限）
如果不需要携带Cookie或HTTP认证信息，也可以设为通配符*，但这种方式兼容性有限，且不能和withCredentials同时使用

情况2：你无法控制目标服务器

这种时候就得绕开浏览器的同源限制，常用方案有两种：

搭建反向代理服务器
自己搭一个简单的中间服务器，前端请求这个代理服务器，由代理服务器去请求目标API（服务器端请求不受浏览器同源策略限制）。比如用Node.js+Express快速实现：

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const cors = require('cors');

const app = express();
app.use(cors()); // 允许你的前端域名访问代理

// 配置代理规则
app.use('/api/golds', createProxyMiddleware({
  target: 'https://www.doviz.com/api/v1/golds',
  changeOrigin: true,
  pathRewrite: { '^/api/golds': '' }
}));

app.listen(3000, () => {
  console.log('Proxy server running on port 3000');
});

然后前端请求改成http://localhost:3000/api/golds/all/latest，代理会帮你转发到目标地址并返回结果。