Axios CORS 问题处理（axios-observable）
小伙伴们，此文具有一定的局限性，但你们要学会举一反三哟～
CORS（跨域资源共享）问题在前端开发中很常见，尤其是使用 Axios 发送跨域请求时。以下是处理 Axios CORS 问题的详细方法：
1. 什么是 CORS？
CORS 是一种安全机制，浏览器会阻止前端代码从不同域名、端口或协议请求资源，除非服务器明确允许。
2. CORS 问题的表现
- 浏览器控制台报错：Access to XMLHttpRequest at 'URL' from origin 'Origin' has been blocked by CORS policy。
- Axios 请求失败，返回 Network Error 或 CORS Error。
- 另，axios.post 请求，返回的异常 error.request 为 [object XMLHttpRequest] 等亦有可能为此问题所致。
3. 解决方法
方法 1：后端配置 CORS
后端服务器需要设置响应头，允许前端域名访问。以下是常见后端的配置方式：
Node.js (Express):
const express = require('express');
const cors = require('cors');
const app = express();
// 允许所有域名访问
app.use(cors());
// 或只允许特定域名访问
app.use(cors({
origin: 'https://your-frontend-domain.com'
}));
app.post('/your-endpoint', (req, res) => {
res.json({ message: 'Hello from server!' });
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
Python (Flask):
from flask import Flask
from flask_cors import CORS
app = Flask(__name__)
CORS(app) # 允许所有域名访问
@app.route('/your-endpoint', methods=['POST'])
def your_endpoint():
return {'message': 'Hello from server!'}
if __name__ == '__main__':
app.run(port=3000)
Nginx：
在 Nginx 配置文件中添加以下内容：
server {
location / {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'Content-Type';
}
}
方法 2：前端配置代理
如果无法修改后端，可以在开发环境中使用代理服务器绕过 CORS 限制。
- Create React App:
在 package.json 中添加：
"proxy": "http://your-backend-server.com"
然后 Axios 请求可以这样写：
axios.post('/your-endpoint', { data: 'your-data' })
.then(response => {
console.log('Response:', response.data);
})
.catch(error => {
console.error('Error:', error);
});
- Vue CLI:
在 vue.config.js 中配置代理：
module.exports = {
devServer: {
proxy: 'http://your-backend-server.com'
}
};
方法 3：设置 Axios 的请求头
某些情况下，服务器可能需要特定的请求头（如 Content-Type 或 Authorization），可以在 Axios 中设置：
axios.post('https://your-api-endpoint.com/data', { data: 'your-data' }, {
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer your-token'
}
})
.then(response => {
console.log('Response:', response.data);
})
.catch(error => {
console.error('Error:', error);
});
方法 4：JSONP（仅限 GET 请求）
如果后端支持 JSONP，可以用它绕过 CORS 限制。Axios 不支持 JSONP，但可以使用其他库（如 jsonp）：
import jsonp from 'jsonp';
jsonp('https://your-api-endpoint.com/data?callback=handleResponse', null, (err, data) => {
if (err) {
console.error('Error:', err);
} else {
console.log('Response:', data);
}
});
方法 5：禁用浏览器 CORS 检查（仅限开发环境）
在开发环境中，可以临时禁用浏览器的 CORS 检查（不推荐用于生产环境）。
- Chrome:
启动 Chrome 时添加参数：
chrome --disable-web-security --user-data-dir=/tmp
4. 常见错误及解决方法
4.1. 错误：Request header field content-type is not allowed by
Access-Control-Allow-Headers
解决方法：后端需要允许 Content-Type 头：
Access-Control-Allow-Headers: Content-Type
4.2. 错误：Response to preflight request doesn't pass access control check
解决方法：后端需要正确处理预检请求（OPTIONS 方法）。
5. 做一下小结
- 最佳实践：后端配置 CORS 是最推荐的方式。
- 开发环境：可以使用代理或禁用浏览器 CORS 检查。
- 生产环境：确保后端正确配置 CORS，避免安全问题。
若还有问题欢迎沟通交流哟～
爱学习的小伙伴，关注不迷路哟～