问题描述：

正常情况下，我的程序访问：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）效果

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

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

资源获取：

 （1）vue代码

其中的FuelManagement.vue页面是我所进行测试的页面，并且在解决完跨域问题后能够实现后端数据的全部加载+新增数据+删除数据+修改数据+异常消息处理+分页查询+条件查询等基本功能。

通过网盘分享的文件：vue解决跨域问题后的功能代码集合项目.zip
链接: https://pan.baidu.com/s/1ThPakHTnRLKgZrv75T3uaw?pwd=acsh 提取码: acsh
--来自百度网盘超级会员v5的分享

 （2）数据库

通过百度网盘分享的文件：燃煤热电数据库2.2.zip
链接：https://pan.baidu.com/s/1CobrQkEb7i0bAdUOcmxIIg?pwd=vebf 
提取码：vebf 
--来自百度网盘超级会员V5的分享

（3）后端代码

通过百度网盘分享的文件：springboot实现前后端调用axios异步请求（后端单体服务器s...
链接：https://pan.baidu.com/s/1o9RFrwjWa3ipvjVY8W2hlQ?pwd=gi6b 
提取码：gi6b 
--来自百度网盘超级会员V5的分享

 如果后端运行我打包的项目，为了能够正常运行（需要兼容maven以及java版本），具体的调整方法看我博客：http://t.csdnimg.cn/Uovig

好啦，希望能够帮助到大家！