小伙伴们，此文具有一定的局限性，但你们要学会举一反三哟～

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，避免安全问题。

若还有问题欢迎沟通交流哟～

爱学习的小伙伴，关注不迷路哟～