解决前后端分离开发过程中使用axios访问后端数据出现跨域问题的解决方法AxiosError:Network Error

问题描述：

正常情况下，我的程序访问：http://localhost/fuels

效果为：

然后在vscode的vue2中访问此链接并打算获取数据：

可是却出现错误信息：

问题分析：

CORS（跨域资源共享）问题

• 如果您的后端和前端不在同一个端口上运行（例如，后端运行在localhost:8080，而前端运行在localhost:3000），浏览器会因跨域请求而阻止访问。这种情况下，您需要在后端配置CORS。

解决方法：

我们需要在前端配置将我们前端的端口号能够跳转到指定的后端端口位置：

（1）首先我们找到vue.config.js文件

然后在 devServer里面添加如下代码：

 // 您可以继续添加其他devServer的配置项，例如：
    proxy: {
      '/': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: { '^/': '' }
      }
    }

具体含义解析：

• '/': { ... }:

  • 这个配置将所有以/开头的请求都代理到后端http://localhost:8080。由于所有请求路径默认都是以/开头的，所以这会捕获所有的请求。

• target: 'http://localhost:8080':

  • 目标后端服务器的地址，所有代理请求都将被转发到这个地址。

• changeOrigin: true:

  • 修改请求中的Host头部为目标服务器的地址。这对某些后端服务器是必要的。

• pathRewrite: { '^/': '' }:

  • 将请求路径中的前缀/移除。比如，前端请求http://localhost:7002/some/path会被代理为http://localhost:8080/some/path。

（2）然后找到我们的main.js文件

添加如下代码：

//新添加的3行
import axios from 'axios';
// 设置 Axios 的基础 URL
axios.defaults.baseURL = '/';

具体含义解析：

axios.defaults.baseURL:

• 这行代码设置了Axios的默认基础URL。所有通过axios发出的请求都会在路径前自动添加这个基础URL。

通过这种方式，您只需在main.js中配置一次baseURL，在项目中的所有组件都可以享受这一配置，简化了代码的维护。

（3）效果

再次重新启动程序之后效果如下：

可以发现，我们前端已经能够成功获取到后端的数据啦！