《axios解决同源策略》
一、解决方案
在浏览器环境中，同源策略限制了不同源之间的资源访问。使用axios可以通过多种方式来解决同源问题，如设置代理、跨域资源共享（CORS）等。这些方法能够使前端应用在遵循安全规范的前提下，顺利地向不同源的服务器发送请求并获取数据。
二、利用CORS解决同源策略
CORS是一种机制，它使用额外的HTTP头来告诉浏览器允许一个域上的网页访问另一个域上的资源。
-
服务器端配置：对于Express框架来说，在服务器端可以这样设置：
javascript
const express = require('express');
const app = express();
app.use((req, res, next) => {
res.header('Access - Control - Allow - Origin', '*'); // 允许所有来源的请求，也可以指定具体的域名
res.header('Access - Control - Allow - Headers', 'Content - Type,Authorization'); // 允许自定义请求头
res.header('Access - Control - Allow - Methods', '*'); // 允许的请求方法
next();
});
-
客户端代码：在前端使用axios发送请求时，不需要做特殊处理，像正常请求一样即可。
javascript
axios.get('http://otherdomain.com/api/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
三、通过代理解决同源策略
-
创建本地代理服务器：我们可以用Node.js创建一个简单的代理服务器。
javascript
const httpProxy = require('http - proxy');
const http = require('http');
const proxy = httpProxy.createProxyServer({});
const server = http.createServer((req, res) => {
proxy.web(req, res, { target: 'http://otherdomain.com' });
});
server.listen(3000);
然后在前端项目中配置axios的baseURL为这个本地代理服务器的地址，例如http://localhost:3000。 -
使用开发工具中的代理功能：如果是基于webpack构建的项目，可以在
webpack.config.js中配置代理。
javascript
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://otherdomain.com',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
};
这样在开发环境下，当请求以/api开头时，就会被代理到目标服务器，并且看起来像是同源请求。
