解决前端使用Axios时的跨域问题

跨域问题是前端开发中常见的问题，当你的前端应用尝试访问不同域名、端口或协议的API时就会出现。
以下是几种解决方案：

1. 后端解决方案


CORS (推荐)

后端需要设置正确的响应头：

1. Access-Control-Allow-Origin: *  // 或指定具体域名
   
2. Access-Control-Allow-Methods: GET, POST, PUT, DELETE
   
3. Access-Control-Allow-Headers: Content-Type, Authorization

复制代码

2. 前端开发环境解决方案


开发服务器代理 (推荐)

在Vue/React等项目的配置文件中设置代理：

• Vue CLI (vue.config.js):
  

1. module.exports = {
   
2.   devServer: {
   
3.     proxy: {
   
4.       '/api': {
   
5.         target: 'http://your-api-server.com',
   
6.         changeOrigin: true,
   
7.         pathRewrite: {
   
8.           '^/api': ''
   
9.         }
   
10.       }
    
11.     }
    
12.   }
    
13. }

复制代码

• React (package.json 或 webpack.config.js):
  

1. "proxy": "http://your-api-server.com"

复制代码

3. 纯前端解决方案


JSONP (仅限GET请求)

1. axios.jsonp('http://example.com/api')
   
2.   .then(response => {
   
3.     console.log(response);
   
4.   });

复制代码

修改Axios请求配置

1. axios.get('http://example.com/api', {
   
2.   headers: {
   
3.     'Content-Type': 'application/json',
   
4.   },
   
5.   withCredentials: true  // 如果需要携带cookie
   
6. })
   
7. .then(response => {
   
8.   console.log(response);
   
9. });

复制代码

4. 其他方案


浏览器插件

开发时可安装浏览器插件临时禁用同源策略（如Chrome的Allow CORS插件）

Nginx反向代理

生产环境可通过Nginx配置反向代理：

1. location /api/ {
   
2.   proxy_pass http://your-api-server.com/;
   
3.   proxy_set_header Host $host;
   
4.   proxy_set_header X-Real-IP $remote_addr;
   
5. }

复制代码

注意事项

• 生产环境不要使用
  1. Access-Control-Allow-Origin: *

  复制代码
  ，应指定具体域名
  
• 携带凭证(cookie等)时，后端需设置
  1. Access-Control-Allow-Credentials: true

  复制代码
• 复杂请求(如Content-Type为application/json)会先发送OPTIONS预检请求
  

选择哪种方案取决于你的具体开发环境和项目需求。通常开发时使用代理，生产环境配置CORS是最佳实践。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

来源：https://www.jb51.net/javascript/339821hzu.htm
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！