前端解决axios请求的跨域问题【2步完成】

     🤹‍♀️潜意识Java：个人主页

🎙座右铭：得之坦然，失之淡然。

💎擅长领域：前端

是的，我需要您的：

🧡点赞❤️关注💙收藏💛

是我持续下去的动力！

---

目录

目录

 一.作者有话说

二.第一步

2.1 在你的vue找到 vite.config.js

2.2 快捷代码 

三. 第二步

 3.1 访问路径更改​编辑

3.2 问题解决了

 

---

 

 一.作者有话说

今天我在前后端联调的时候发现了一个跨域传值报错，让我很头痛，但是好在花费不到2个小时查阅了一些资料通过前端解决了跨域问题。

 

解决前后端的跨域问题，本文主要是带你通过前端解决跨域问题，这里的前端指的是通过改vue的有关配置去解决跨域问题，指在解决问题，如果要系统的学习跨域问题，那么建议前后端跨域解决方案都要去了解一些。

二.第一步

ticket:1 Access to XMLHttpRequest at 'http://localhost:8080/seat' from origin 'http://localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

上面是报错的详细。 

2.1 在你的vue找到 vite.config.js

 加入框框的这句话，内容自己更改

2.2 快捷代码 

【可以复制】端口号改改就可以！

import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    proxy: {
      '/seat': {
        target: 'http://localhost:8080',
        changeOrigin: true,
      }
    }
  }
});

三. 第二步

 3.1 访问路径更改

3.2 问题解决了

到这里就解决了问题了。

我也不想啰嗦，因为我搜索了许多csdn的文章大多数都是非常的啰嗦的， 

---

 

     🤹‍♀️潜意识Java：个人主页

🎙座右铭：得之坦然，失之淡然。

💎擅长领域：前端

是的，我需要您的：

🧡点赞❤️关注💙收藏💛

是我持续下去的动力！