《axios调用不同域名》

解决方案

在使用axios进行跨域请求时，针对调用不同域名的情况，主要有两种常见的解决方案：一是通过配置服务器端来允许跨域资源共享（CORS），二是利用代理服务器转发请求。这两种方式都可以有效地解决axios调用不同域名的问题。

一、CORS配置（服务器端）

当我们在前端使用axios调用不同域名的接口时，如果服务器端正确配置了CORS，就可以实现跨域请求。例如，在一个基于Node.js和Express框架的服务器端项目中，可以通过以下代码设置CORS：

javascript
const express = require('express');
const cors = require('cors');
const app = express();</p>

<p>// 允许所有域名跨域访问，实际项目可根据需求指定特定域名
app.use(cors());</p>

<p>app.get('/data', (req, res) => {
    res.json({ message: 'This is data from different domain' });
});</p>

<p>app.listen(3000, () => {
    console.log('Server is running on port 3000');
});
<code>
在前端使用axios请求这个不同域名下的`/data`接口就无需担心跨域问题了：
javascript
axios.get('http://localhost:3000/data')
    .then(response => {
        console.log(response.data);
    })
    .catch(error => {
        console.error('There was an error!', error);
    });

二、代理服务器（前端项目配置）

对于前端开发来说，如果无法修改服务器端代码，可以考虑在前端项目中配置代理服务器。以Vue CLI项目为例，在vue.config.js文件中添加如下配置：

javascript
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://otherdomain.com',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
};

这样，在开发环境中，当我们发送类似axios.get('/api/data')这样的请求时，它会被代理到http://otherdomain.com/data，并且浏览器会认为是同源请求，从而避免跨域问题。不过需要注意的是，这种代理配置只在开发环境有效，在生产环境中还需要根据实际情况处理跨域问题。