尝试使用axios访问维基百科Api，但收到CORS策略错误

CORS（跨源资源共享）策略错误通常发生在浏览器端，当一个网页尝试从与其不同的源（域、协议或端口）请求资源时，浏览器会执行CORS策略以确保安全性。如果服务器没有正确配置CORS，浏览器就会阻止这种跨域请求。

基础概念

CORS是一种安全机制，用于限制浏览器对不同源资源的访问。当浏览器发起一个跨域请求时，它会先发送一个预检请求（OPTIONS请求），询问服务器是否允许这种跨域请求。服务器需要在响应头中包含适当的CORS头信息，以告知浏览器是否允许该请求。

类型

简单请求：满足特定条件的请求（如GET、POST请求，且HTTP头信息有限）。
预检请求：对于复杂请求，浏览器会先发送一个OPTIONS请求进行预检。

应用场景

API服务：允许不同域的前端应用访问后端数据。
静态资源：如图片、CSS、JavaScript文件等。

问题原因

当你使用axios访问维基百科API时遇到CORS错误，通常是因为维基百科服务器没有在你的请求中设置适当的CORS头信息，或者你的请求方式不被允许。

解决方法

方法一：服务器端配置CORS

如果你有权限修改服务器配置，可以在服务器端添加CORS头信息。例如，在Node.js中使用Express框架：

const express = require('express');
const app = express();

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  next();
});

app.get('/data', (req, res) => {
  res.json({ message: 'This is data from the server' });
});

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

方法二：使用代理服务器

如果你无法修改服务器配置，可以使用一个代理服务器来转发请求。例如，使用Node.js和http-proxy-middleware：

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

const app = express();

app.use('/api', createProxyMiddleware({
  target: 'https://en.wikipedia.org',
  changeOrigin: true,
  pathRewrite: {
    '^/api': ''
  }
}));

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

然后，你可以通过代理服务器访问维基百科API：

axios.get('http://localhost:3000/api/wiki/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('There was an error!', error);
  });

方法三：使用CORS插件（仅限开发环境）

在开发环境中，你可以使用浏览器插件来临时绕过CORS限制。例如，Chrome浏览器的“CORS Unblock”插件。

示例代码

以下是一个使用axios访问维基百科API的示例：

const axios = require('axios');

axios.get('https://en.wikipedia.org/w/api.php', {
  params: {
    action: 'query',
    format: 'json',
    list: 'search',
    srsearch: 'JavaScript'
  }
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error('There was an error!', error);
});

如果遇到CORS错误，可以尝试上述解决方法之一。希望这些信息对你有所帮助！