CORS 问题：“对预检请求的响应未通过访问控制检查”

Question

我正在开发一个 Vue.js/Nuxt.js 项目，我正在向“https://app.arianlist.com”发出 API 请求。但是，我面临 CORS 问题，并且收到以下错误消息：

“从源“http://localhost:3000”访问“https://app.arianlist.com/api/public/items/index/book”处的 XMLHttpRequest 已被 CORS 策略阻止：响应预检请求未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。”

我的代理服务器：

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

const app = express();
const PORT = 3000;

const apiProxy = createProxyMiddleware('/api', {
  target: 'https://app.arianlist.com',
  changeOrigin: true,
  pathRewrite: {
    '^/api': '',
  },
  onProxyRes: function (proxyRes, req, res) {
    res.setHeader('Access-Control-Allow-Origin', '*');
  },
});

app.use('/api', apiProxy);

app.listen(PORT, () => {
  console.log(`Proxy server is running on http://localhost:${PORT}`);
});

Answer 1

错误消息显示：

在“

https://app.arianlist.com/api/public/items/index/book

”处访问 XMLHttpRequest

因此，浏览器正在直接向

https://app.arianlist.com/api/public/items/index/book

发出HTTP请求，并且不使用您的代理。

您需要更改浏览器端代码，以便它使用您的代理的 URL。

---

您还应该注意，如果进行 preflight ，那么响应中将需要额外的 CORS 标头（它们是什么将取决于请求预检的原因，并将在预检 OPTIONS 请求的请求标头中表达）。

Access-Control-Allow-Origin

本身是不够的，并且可能会禁止使用通配符值。