Vue项目解决跨域问题

项目场景：

最近在用vue的框架在做一个前后端分离的网站，在做登录页面的时候遇到一个问题，在点击登录按钮之后，将整个表单做完预校验后准备和后端接口提供的数据进行校验的时候出现了问题，在用axios请求接口的时候报错了。测试过后端接口是通的，但是浏览器控制台的promise报错了，特意写一篇文章来记录一下！

---

问题描述

在登录页面，点击登录后控制台报错。

---

原因分析：

解决这个问题我们需要先了解什么是跨域？
以下三种情况就是最经典的跨域问题。

#协议跨域
http://a.baidu.com访问https://a.baidu.com；
#端口跨域
http://a.baidu.com:8080访问http://a.baidu.com:80；
#域名跨域
http://a.baidu.com访问http://b.baidu.com；

只要符合以上三种情况，那么就是跨域问题导致请求不到接口数据。

---

解决方案：

我的解决方法就是，打开vue.config.js文件，设置代理

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // 配置代理
  devServer: {
      proxy: 'http://localhost:8888'
    }
})

每个人设置的不一定都一样的，假如之前是用8080端口去请求的URL是8888端口（我就是这种情况），那么你就需要设置代理是8888端口，保证你原来的端口和你要请求的端口保持一致就不会出现跨域问题了。

附上成功后的截图~~~