使用axios解决跨域问题 – 前端工程师必备技能

小蓝 • 2024-11-19 00:39 • 编程

跨域是指一个域名下的网页去请求另一个域名下的资源，这个过程涉及到浏览器的同源策略，如果跨域请求不加处理直接发送是会被浏览器阻止的。在前端工程师开发实践中，跨域是一个常见的问题，而axios是一个非常流行的网络请求库，在本文中我们将会探讨如何使用axios解决跨域问题。

一、跨域问题的产生原因

跨域问题产生的原因是浏览器限制了网页对不同源之间数据的访问，如果一个域名上的网页想要访问另一个域名上的网页，浏览器就会阻止这个操作，这个限制被称为同源策略。同源指的是协议、域名和端口号相同，当这三者任意一个不同，就会被认为是跨域请求。

// 例子
// 当前域名为 http://localhost:8080
// 下列网址都是跨域请求
http://www.baidu.com
https://www.google.com
http://localhost:3000
http://localhost:8081

二、跨域问题的解决方案

在实际开发中，通常有以下解决跨域问题的方案。

1. 服务器端进行跨域

在服务端配置相应的响应头，开放对不同源的访问权限。例如在 Node.js 中使用 CORS 模块，或是在 Nginx 中配置不同域名的代理。这个方案是在服务端进行配置，不需要在前端做任何改动。

2. JSONP

JSONP 是一种跨域解决方案，通过在前端定义一个回调函数，将回调函数名通过 url 传递给后端，然后后端返回 JavaScript 代码，该代码调用该回调函数，并将数据作为参数传递给该回调函数。这个方案需要后端配合，前后端都需要进行代码改动，而且只能用于 GET 请求。

3. WebSocket

WebSocket 是 HTML5 提供的一种跨域通讯方法，它利用了 HTTP 协议来建立连接，然后转由 TCP/IP 协议发送数据。这个方案需要在前后端都进行代码改动，但是相比于其他方案，WebSocket 可以支持双向通讯且传输速度更快。

4. CORS

CORS（跨域资源共享）是一种官方标准的解决跨域的方案。在服务端设置相应的响应头，允许不同源的请求。这个方案不需要前端做任何改动，只需要服务器适当地设置响应头即可。CORS 方案支持所有类型的 HTTP 请求方法。

三、使用axios进行跨域请求

axios 是一个基于 Promise 的异步请求库，它是一个非常强大的网络请求库，而且使用非常方便。下面介绍如何使用 axios 进行跨域请求。

// 安装axios
npm install axios --save

对于 axios 跨域请求，我们只需要设置请求头和使用 withCredentials 即可。withCredentials 用于跨域请求时带上 cookie，这是跨域请求时容易忽略的细节。

import axios from 'axios';

// 设置基础请求路径
axios.defaults.baseURL = 'http://localhost:3000';

// 设置设定超时时间
axios.defaults.timeout = 10000;

// 设置响应拦截器
axios.interceptors.response.use(
  response => response.data,
  error => Promise.reject(error),
);

// 发送 GET 请求
axios.get('/user', {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
  },
  withCredentials: true,
})
  .then(res => console.log(res))
  .catch(error => console.error(error));

// 发送 POST 请求
axios.post('/login', {
  username: 'admin',
  password: '123456'
}, {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
  },
  withCredentials: true,
})
  .then(res => console.log(res))
  .catch(error => console.error(error));

四、总结

本文介绍了跨域问题产生的原因，以及解决跨域问题的相关方案，同时也介绍了如何使用 axios 进行跨域请求。当然，跨域请求并不是一件简单的事情，正确使用一定的跨域解决方案才是王道。在实际开发中，我们要根据情况来选择跨域解决方案，唯有这样才能开发出更加高效、优雅的应用程序。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/158145.html