Axios - 没有“访问控制允许来源” - CORS

Posted 2023-03-04

【中文标题】Axios - 没有“访问控制允许来源” - CORS

【英文标题】：Axios - No 'Access-Control-Allow-Origin' - CORS

【发布时间】：2020-11-26 23:56:33

【问题描述】：

我正在构建一个使用外部 API 的 javascript 应用程序。 为了获取数据，我使用 axios，但是每当我发出请求时，它都会返回一个 CORS 错误 - “没有 Access-Control-Allow-Origin 标头集”。 现在，一个临时的解决方案是在 API URL 前面添加一个第三方代理（例如https://cors-anywhere.herokuapp.com），它工作得很好，但我真的不想依赖第三方服务器并想在我自己的应用程序中处理它。

我已经尝试了几乎所有方法，但仍然无法正常工作。我使用 axios 响应拦截器将所需的标头附加到响应中，但它不起作用。

axios.interceptors.response.use(res => 
  res.headers['Access-Control-Allow-Origin'] = '*';
  res.headers['Access-Control-Allow-Credentials'] = 'true'
  res.headers['Access-Control-Request-Method'] = 'POST'
  return res;
)

我的 server.js 文件看起来像这样

const serveStatic = require('serve-static')
const path = require('path')
const cors = require('cors');

const app = express()

app.use('/', serveStatic(path.join(__dirname, '/dist')))
app.use(cors());

const port = process.env.PORT || 8080
app.listen(port, () => console.log("starting on port 8080"));

这个问题有什么解决办法吗？

【参考方案1】：

尝试颠倒这两行：

app.use(cors());
app.use('/', serveStatic(path.join(__dirname, '/dist')));

告诉我它是否有效

顺便说一下你的拦截器没用，你可以去掉它：

axios.interceptors.response.use(... 

【讨论】：

我倒转了行，但预检仍然被触发并给我一个 cors 错误，不幸的是。我删除了除其中一个之外的所有拦截器和公共标头，这就是我的 api-key 标头。

尝试两件事：1) 将cors() 替换为cors(origin: true) 2) 添加withCredentials: true（参见axios 文档github.com/axios/axios）。如果这两项工作中的一项，我将替换我上面的回复

仍然没有...我不确定它是否重要，但 API 的实现包括一个 POST 请求（这实际上是返回一个 CORS 错误，因为它是第一个发送的请求）

with cors(origin: true) 你可以检查 OPTIONS 请求或 POST 请求是否被阻塞。您能否在被阻止的请求中提供来自 Chrome 的请求和响应标头

POST 请求是一个阻塞请求，如果我没记错的话。尽管 OPTIONS 请求也不包含 Access-Cotrol-Allow-Origin 标头。