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

简介: 本文介绍如何通过前端配置解决跨域问题,主要针对Vue项目中的`vite.config.js`文件进行修改。作者在联调过程中遇到跨域报错

     🤹‍♀️潜意识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

image.gif 编辑 加入框框的这句话,内容自己更改

2.2 快捷代码

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

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

image.gif

三. 第二步

3.1 访问路径更改 image.gif 编辑

3.2 问题解决了

到这里就解决了问题了。

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


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

🎙座右铭:得之坦然,失之淡然。

💎擅长领域:前端

是的,我需要您的:

🧡点赞❤️关注💙收藏💛

是我持续下去的动力!


相关文章
|
5天前
|
JSON 前端开发 API
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
29 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
|
7天前
|
JSON 前端开发 测试技术
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
51 10
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
|
3月前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
3月前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
53 0
|
3月前
|
前端开发 JavaScript 安全
揭秘!前端大牛们如何高效解决跨域问题,提升开发效率!
【10月更文挑战第30天】在Web开发中,跨域问题是一大挑战。本文介绍前端大牛们常用的跨域解决方案,包括JSONP、CORS、postMessage和Nginx/Node.js代理,对比它们的优缺点,帮助初学者提升开发效率。
132 4
|
3月前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
76 2
|
4月前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
60 18
|
4月前
|
前端开发 JavaScript 安全
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
278 4
|
4月前
|
缓存 JavaScript 搜索推荐