axios.js跨域请求

一、基础概念

1. 同源策略
   • 浏览器的安全功能，它规定从一个源（协议、域名、端口）加载的文档或脚本与来自另一个源的资源进行交互时，会存在限制。例如，http://example.com下的页面不能直接访问https://another - example.com下的资源（协议不同），或者http://example.com:8080不能访问http://example.com（端口不同）。

• 跨域请求
  • 当浏览器要向不同源（协议、域名、端口有至少一个不同）发送请求时就属于跨域请求。Axios.js是一个基于Promise的HTTP客户端，用于浏览器和Node.js中发送HTTP请求。当使用Axios在浏览器中进行跨域请求时，就会受到同源策略的限制。

二、相关优势

1. Axios本身的优势
   • 支持Promise API，使得异步请求的处理更加简洁和易于管理。
   • 可以在浏览器和Node.js环境中使用，具有很好的通用性。
   • 自动转换JSON数据，方便数据的处理。

三、类型

1. 简单请求
   • 满足特定条件的跨域请求，例如请求方法是GET、POST、HEAD中的一种，并且HTTP头信息限制在一定范围内（如只包含Accept、Accept - Language、Content - Language、Content - Type等特定头信息）。对于简单请求，浏览器会在请求头中添加Origin字段表明请求来源，服务器如果允许该源的访问，会直接返回响应。

• 预检请求（Preflight Request）
  • 对于不满足简单请求条件的跨域请求，浏览器会先发送一个OPTIONS请求（预检请求）到服务器。这个请求包含一些关于实际请求的信息，如实际请求的方法、自定义头信息等。服务器如果允许该跨域请求，会在响应头中设置相应的Access - Control - Allow - Origin等相关头信息，然后浏览器才会发送实际的跨域请求。

四、应用场景

1. 单页面应用（SPA）
   • 在构建现代的单页面应用时，前端通常需要从不同的后端服务获取数据。例如，一个电商应用的前端部分可能由一个独立的前端团队开发并部署，而后端API由另一个团队提供，这时候就会涉及到跨域请求。

• 微服务架构
  • 在微服务架构下，不同的微服务可能部署在不同的域名或端口下。前端应用可能需要与多个微服务进行交互，从而产生跨域请求。

五、遇到的问题及解决方法

1. 问题
   • 浏览器报跨域错误，如No 'Access - Control - Allow - Origin' header is present on the requested resource。
   • 原因：
     • 服务器没有正确设置允许跨域访问的头信息。对于简单请求，服务器需要设置Access - Control - Allow - Origin头，其值可以是特定的源（如http://example.com）或者*（表示允许所有源，但不适用于带有凭证的请求）。对于预检请求，服务器除了设置Access - Control - Allow - Origin外，还需要根据实际情况设置Access - Control - Allow - Methods（允许的请求方法）、Access - Control - Allow - Headers（允许的自定义请求头）等头信息。
   • 解决方法：
     • 在服务器端设置响应头。如果使用Node.js和Express框架，可以安装cors中间件来方便地处理跨域问题。示例代码如下：

const express = require('express');
const cors = require('cors');
const app = express();

// 使用cors中间件，默认允许所有源
app.use(cors());

// 如果要指定允许的源
// app.use(cors({
//     origin: 'http://example.com'
// }));

app.get('/data', (req, res) => {
    res.json({ message: 'This is data from the server' });
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

1. 问题
   • 带有凭证（如Cookies、HTTP认证等）的跨域请求失败。
   • 原因：
     • 当发送带有凭证的跨域请求时，Access - Control - Allow - Origin不能设置为*，并且服务器需要在响应头中设置Access - Control - Allow - Credentials为true。
   • 解决方法：
     • 在服务器端设置正确的头信息。例如在Node.js和Express中：

app.use(cors({
    origin: 'http://example.com',
    credentials: true
}));

同时，在Axios客户端请求时，需要设置withCredentials为true：

axios.get('http://server - domain.com/data', {
    withCredentials: true
}).then(response => {
    console.log(response.data);
}).catch(error => {
    console.error(error);
});