办理 Axios 跨域题目，轻松实现接口调用

跨域是指访问别的一个域的资源，由于浏览器的同源计谋，默认情况下利用 XMLHttpRequest 和 Fetch 请求时是不答应跨域的。跨域的根本原因是浏览器的同源计谋，这是由浏览器对 JavaScript 施加的安全限定。

Axios 跨域常见报错

跨域请求被制止 (Cross-Origin Request Blocked) ：
这是由浏览器实行的同源计谋导致的错误。浏览器在默认情况下不答应从一个源发送请求到另一个源，除非目标服务器明白授权。假如没有采取任何跨域办理方案，浏览器会拦截该请求，并报告此错误。
无法获取响应内容 (No 'Access-Control-Allow-Origin' header is present on the requested resource) ：
当利用 CORS (跨域资源共享) 办理方案时，服务器需要在响应头中添加 Access-Control-Allow-Origin 头信息来指示答应访问资源的泉源。假如服务器没有正确配置这个头信息或配置不正确，浏览器会报告此错误，表示未经授权无法获取响应内容。
请求出现网络错误 (Network Error) ：
当跨域请求在发送时出现网络错误（比方目标服务器不可访问、请求超时等），Axios 会捕获这个错误，并将其报告为 "Network Error"。
预检请求失败 (Preflight request failed) ：
当利用 CORS 发起一些复杂的请求（比方带有自定义头信息或利用 PUT、DELETE 等非简朴请求类型），浏览器会在发送真实请求之前发送一个 OPTIONS 预检请求。假如服务器没有正确处理 OPTIONS 请求或未返回正确的预检响应头，浏览器会报告 "reflight request failed" 错误。
署理服务器错误：
假如利用署理服务器作为办理方案，但署理服务器配置有误或不可用，Axios 可能会报告与署理服务器毗连相关的错误。
Axios 跨域的办理方法

1. CORS

CORS 需要服务器设置 Access-Control-Allow-Origin 响应头，表示该资源可以被指定的域举行跨域访问。

1. [/code] [code]// 服务端代码
2. res.setHeader('Access-Control-Allow-Origin', '*');

复制代码

2. 服务端启用 CORS

比如 Node.js  Express 启用 CORS:

1. [/code] [code]const express = require('express')
2. const app = express()
4. app.use(function (req, res, next) {
6.   // 启用 CORS
7.   res.header('Access-Control-Allow-Origin', '*');
9.   next();  
10. })

复制代码

3. JSONP

JSONP 的原理是动态插入

1. [/code] [code]    import axios from 'axios';
3. axios.get('/api/user?callback=fetchUser');
5. function fetchUser(user) {
6.   console.log(user);
7. }

复制代码

服务端返回 JSON 数据并带上函数调用:

1. [/code] [code]  fetchUser({
2.   name: 'jack'
3. })

复制代码

4. 署理服务器

在开发情况下，可以在本地启动一个署理服务器，实现跨域访问。在下面的例子中，客户端可以通过访问署理服务器的 /api/data 路由来获取目标服务器上的数据。

1. [/code] [code]    // Node.js 代理服务器
2. const express = require('express');
3. const axios = require('axios');
4. const app = express();
5. const port = 3000;
7. app.use(express.json());
9. app.get('/api/data', async (req, res) => {
10.   try {
11.     const response = await axios.get('https://目标服务器的URL/data');
12.     res.json(response.data);
13.   } catch (error) {
14.     res.status(500).json({ error: 'Failed to fetch data from the target server' });
15.   }
16. });
18. app.listen(port, () => {
19.   console.log(`Proxy server is running on http://localhost:${port}`);
20. });

复制代码

Axios 跨域代码实例

假设存在一个需要跨域访问的 API:

1. [/code] [code]  
2. axios.get('http://cross-domain-api.com/users')

复制代码

可以在本地 3000 端口启动一个 Express 署理服务器:

1. [/code] [code]    const express = require('express');
2. const { createProxyMiddleware } = require('http-proxy-middleware');
4. const app = express();
6. app.use('/api', createProxyMiddleware({
7.   target: 'http://cross-domain-api.com', // 跨域目标接口
8.   changeOrigin: true
9. }))
11. app.listen(3000);

复制代码

然后修改 axios 请求地址,指向署理服务器即可:

1. [/code] [code]axios.get('http://localhost:3000/api/users')

复制代码

1. [/code] [code]## 提示与注意事项

复制代码

• 选择跨域办理方案时，思量到项目的复杂性和需求，选择最合适的方法。
  
• JSONP 只支持 GET 请求，不适用于全部场景。
  
• CORS 需要服务器端的支持，在一些旧版本的浏览器中可能不完全支持。
  

利用 Apifox 调试后端接口

Apifox = Postman + Swagger + Mock + JMeter，Apifox 支持调试 http(s)、WebSocket、Socket、gRPC、Dubbo 等协议的接口，而且集成了 IDEA 插件。在后端职员写完服务接口时，测试阶段可以通过 Apifox 来校验接口的正确性，图形化界面极大的方便了项目的上线服从。

总结

Axios 跨域常用的办理方法有 CORS、JSONP、署理等，开发情况可通过署理服务器实现跨域，CORS 需要服务端设置 Access-Control-Allow-Origin 响应头，JSONP 只支持 GET 请求。选择适合项目需求的办理方案能够很好地办理跨域题目，保障应用的正常运行。
知识扩展：

• FastAPI 与 Flask：Python Web 两大盛行框架综合对比
  
• Axios 怎么通过 FormData 对象上传文件？
  

参考资料:

• MDN - 跨域资源共享CORS：跨源资源共享（CORS） - HTTP | MDN
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。