在前端开发中，我们经常会使用 axios 这个库来发送 HTTP 请求。但是，在 React 项目中使用 axios 可能会遇到跨域问题。本文将介绍如何解决这个问题。
什么是跨域问题
跨域问题是指在浏览器中，当一个页面的 JavaScript 代码向不同域名的服务器发送请求时，由于浏览器的安全限制，请求会被拒绝。这是因为浏览器的同源策略限制了 JavaScript 代码只能与同一域名下的资源进行交互。
解决跨域问题的方法
1. CORS
CORS（Cross-Origin Resource Sharing）是一种跨域解决方案，它允许在跨域请求中携带一些特殊的 HTTP 头部，以便服务器能够识别并允许这些请求。
在使用 axios 发送跨域请求时，我们可以在服务器端设置响应头，允许来自其他域名的请求。例如，在 Express 中，可以使用以下代码：
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
next();
});上面的代码会将 Access-Control-Allow-Origin 头部设置为 *，表示允许来自任何域名的请求。Access-Control-Allow-Methods 和 Access-Control-Allow-Headers 头部则分别指定了允许的 HTTP 方法和请求头。
2. JSONP
JSONP（JSON with Padding）是一种跨域解决方案，它利用了 HTML 中 <script> 标签不受同源策略限制的特性，向服务器发送一个带有回调函数名的 GET 请求，服务器返回一个 JSON 对象，并在返回的数据中调用该回调函数。
在使用 axios 发送 JSONP 请求时，我们可以将 responseType 设置为 jsonp，并指定回调函数名。例如：
-- -------------------- ---- -------
----------------------------------- -
------- -
--------- ------------
--
------------- -------
---------------- -- -
---------------------------
-------------- -- -
-------------------
---上面的代码会向 http://example.com/api?callback=myCallback 发送一个 GET 请求，并指定回调函数名为 myCallback。服务器返回的数据应该是一个类似于 myCallback({ "name": "John" }) 的字符串，axios 会自动将其解析为 JSON 对象并调用 myCallback 函数。
3. 代理服务器
代理服务器是一种跨域解决方案，它可以将客户端发送的请求转发到目标服务器，并将目标服务器返回的数据返回给客户端。由于代理服务器与目标服务器的通信不受同源策略限制，因此可以解决跨域问题。
在使用 axios 发送跨域请求时，我们可以通过配置代理服务器来解决跨域问题。例如，在 Vue CLI 3 中，可以通过在 vue.config.js 文件中添加以下配置来启用代理服务器：
-- -------------------- ---- -------
-------------- - -
---------- -
------ -
------- -
------- ---------------------
------------- ----
-
-
-
--上面的代码会将所有以 /api 开头的请求转发到 http://example.com，并将 changeOrigin 设置为 true，以便将请求头中的 Host 字段设置为目标服务器的域名。
示例代码
下面的代码演示了如何在 React 项目中使用 axios 发送跨域请求：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ----- ---- --------
-------- ----- -
----- ------ -------- - -------------
----- ----------- - -- -- -
----------------------------------- -
------- -
----- ------
-
---------------- -- -
-----------------------
-------------- -- -
-------------------
---
--
------ -
-----
------- -----------------------------------
-------------
------
--
-
------ ------- ----在上面的代码中，我们通过 axios.get 发送了一个 GET 请求，并将返回的数据显示在页面上。如果遇到跨域问题，可以根据上面的方法进行解决。
结论
在 React 项目中使用 axios 发送跨域请求时，可能会遇到跨域问题。本文介绍了三种解决跨域问题的方法：CORS、JSONP 和代理服务器。根据实际情况选择合适的方法，可以避免跨域问题带来的麻烦。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673ad24a39d6d08e88affe8d