如何使用Axios.js处理跨域请求问题？

Axios跨域请求详解

一、什么是跨域请求？

跨域请求是指浏览器从一个域向另一个域发送请求，由于浏览器的同源策略（Same-Origin Policy），默认情况下，这种请求会被阻止，除非目标服务器明确允许跨域请求，常见的跨域请求包括：

1、不同的域名：例如从 example.com 请求 api.example.com。

2、不同的端口：例如从 localhost:8080 请求 localhost:3000。

3、不同的协议：例如从 http 请求 https。

二、Axios简介

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 node.js，它支持发送异步 HTTP 请求，并且可以处理响应数据，Axios 是现代前端开发中常用的库之一，特别是在与后端 API 交互时。

三、Axios跨域请求的常见错误及解决方法

1、跨域请求被阻止 (Cross-Origin Request Blocked)

原因：浏览器的同源策略阻止了跨域请求。

解决方法：需要目标服务器配置 CORS（跨域资源共享）。

2、无法获取响应内容 (No 'Access-Control-Allow-Origin' header is present on the requested resource)

原因：目标服务器未正确配置 CORS 头信息。

解决方法：在服务器端添加Access-Control-Allow-Origin 头信息。

3、请求出现网络错误 (Network Error)

原因：跨域请求时出现网络问题，如目标服务器不可访问或请求超时。

解决方法：检查网络连接，确保目标服务器正常运行。

4、预检请求失败 (Preflight request failed)

原因：使用复杂请求类型（如 PUT、DELETE）时，浏览器会先发送一个 OPTIONS 预检请求，如果服务器未正确处理该请求，会导致失败。

解决方法：确保服务器正确处理 OPTIONS 预检请求并返回正确的响应头。

5、代理服务器错误

原因：使用了代理服务器但配置有误或不可用。

解决方法：检查代理服务器配置，确保其正常运行。

四、解决Axios跨域请求的方法

1、CORS（跨域资源共享）

原理：通过设置服务器端的响应头来允许特定域的跨域请求。

实现方法：

Node.js + Express：

       const express = require('express');
       const cors = require('cors');
       const app = express();
       const port = 3000;
       app.use(cors()); // 允许所有来源的跨域请求
       app.post('/login', (req, res) => {
         res.send('登录成功');
       });
       app.listen(port, () => {
         console.log(Server is running on http://localhost:${port});
       });

Flask：

       from flask import Flask, request, jsonify
       from flask_cors import CORS
       app = Flask(__name__)
       CORS(app)  # 允许所有来源的跨域请求
       @app.route('/login', methods=['POST'])
       def login():
           return jsonify({'message': '登录成功'})
       if __name__ == '__main__':
           app.run(port=3000)

2、JSONP

原理：通过动态插入<script> 标签来绕过同源策略，只支持 GET 请求。

实现方法：

前端代码：

       <button id="getData">Get Data</button>
       <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
       <script>
           document.getElementById('getData').addEventListener('click', function() {
               const url = 'https://example.com/api/data?callback=handleResponse';
               window[url.split('=')[1]] = function(response) {
                   console.log(response);
               };
               const script = document.createElement('script');
               script.src = url;
               document.body.appendChild(script);
           });
       </script>

后端代码：

       // 假设使用 Express
       const express = require('express');
       const app = express();
       const port = 3000;
       app.get('/api/data', (req, res) => {
           const callback = req.query.callback;
           const data = { message: 'Hello JSONP' };
           res.send(${callback}(${JSON.stringify(data)}));
       });
       app.listen(port, () => {
           console.log(Server is running on http://localhost:${port});
       });

3、代理服务器

原理：在开发环境中，使用本地代理服务器转发请求，避免直接跨域。

实现方法：

Vue CLI 配置：

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

Nginx 配置：

       server {
           listen 80;
           server_name yourdomain.com;
           location / {
               root /var/www/html;
               index index.html;
               try_files $uri $uri/ /index.html;
           }
           location /api/ {
               proxy_pass http://localhost:3000/;  # 将 /api 前缀的请求转发到后端服务器
               proxy_http_version 1.1;
               proxy_set_header Upgrade $http_upgrade;
               proxy_set_header Connection 'upgrade';
               proxy_set_header Host $host;
               proxy_cache_bypass $http_upgrade;
           }
       }

五、Axios跨域请求的代码实例

1、发送 GET 请求：

   axios.get('/api/data', {
       params: { device_id: '869298056483241' }
   }).then(response => {
       console.log(response.data);
       this.data = response.data.sensor;
   }).catch(error => {
       console.log(error);
   });

2、发送 POST 请求：

   axios.post('/api/data', { device_id: '869298056483241' }, { headers: { 'Content-Type': 'application/json' } })
       .then(response => {
           console.log(response.data);
           this.data = response.data.sensor;
       })
       .catch(error => {
           console.log(error);
       });

六、相关问题与解答栏目

问题1：如何在开发环境中使用代理解决跨域问题？

解答：在开发环境中，可以使用 Webpack 开发服务器的代理功能来解决跨域问题，以 Vue CLI 为例，可以在vue.config.js 中配置代理：

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:3000', // 目标服务器地址
                changeOrigin: true, // 是否改变源地址
                pathRewrite: { '^/api': '' } // 重写路径，去除 /api 前缀
            }
        }
    }
};

这样，所有发往/api 的请求都会被代理到http://localhost:3000，从而避免跨域问题。

问题2：为什么使用 CORS 解决跨域问题时，浏览器仍然报告错误？

解答：使用 CORS 解决跨域问题时，如果浏览器仍然报告错误，可能是由于以下原因：

1、服务器未正确设置 CORS 头信息：确保服务器设置了Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers 等必要的头信息，在 Express 中：

   app.use((req, res, next) => {
       res.header('Access-Control-Allow-Origin', '*'); // 允许所有来源的跨域请求
       res.header('Access-Control-Allow-Methods', 'GET,POST,PUT,DELETE'); // 允许的 HTTP 方法
       res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization'); // 允许的请求头
       next();
   });

2、浏览器缓存问题：有时候浏览器会缓存之前的请求结果，导致即使服务器已经正确设置了 CORS 头信息，浏览器仍然报告错误，可以尝试清除浏览器缓存或者使用隐私模式重新测试。

以上就是关于“axiosjs跨域请求”的问题，朋友们可以点击主页了解更多内容，希望可以够帮助大家!