后端controller上已加了@CrossOrigin注解，前端上传文件时仍然报跨域的错：No 'Access-Control-Allow-Origin' header is present on

最新推荐文章于 2025-06-12 12:15:57 发布

rxcht123

最新推荐文章于 2025-06-12 12:15:57 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： JAVA 前端 nginx 文章标签： vue nginx java http

本文链接：https://blog.youkuaiyun.com/rxcht123/article/details/104781569

在Vue应用中使用Element UI进行文件上传时，遇到跨域错误。尽管后端Java Controller已添加@CrossOrigin注解，但问题仍未解决。排查后发现，原因是Nginx的默认client_max_body_size限制为1M。通过在Nginx配置文件nginx.conf中增加`client_max_body_size 200M`并重启Nginx，成功解决了文件上传的跨域问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

环境：前端vue、nginx windows端1.61.1
报错：前端通过element 文件上传控件，点击上传文件，浏览器报错：
Access to XMLHttpRequest at ‘http://localhost:6100/vidservice/vod/upload’ from origin ‘http://localhost:9529’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

后端controller上已经加了@CrossOrigin注解，而且其他controller同样使用此注解，并没有出现跨域问题：

@RestController
@RequestMapping("/vidservice/vod")
@CrossOrigin

查了教学视频发现nginx中需要设置最

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

rxcht123

关注关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

跨域问题No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.

qq_41847894的博客

03-11

1600

跨域问题No 'Access-Control-Allow-Origin' header is present on the requested resource.

fetch请求，No ‘Access-Control-Allow-Origin‘ header的解决方法，SpringBoot支持跨域

Top5软件工程硕士，先后在京东、字节从事多年Java后端开发、实时和离线大数据开发

10-10

1万+

Failed to load http://localhost:8080/a/b: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had...

参与评论您还未登录，请先登录后发表或查看评论

Controller类明明写了@CrossOrigin跨域注解，但还是有跨域问题

m0_74462339的博客

06-01

894

不过，这只能暂时解决该问题，毕竟过滤器还是要用的，后续我再探索一下。此时，先注释掉过滤器注解，让其不生效，就可以避免干扰跨域处理了。可能是写的过滤器干扰到了跨域处理。

后端使用@CrossOrigin页面还显示跨域问题？

Ron_的博客

01-27

1万+

后端使用@CrossOrigin页面还显示跨域问题？错误信息如下：解决方案：原因：前后端分离项目，后端设置的允许跨域的代码，到前端调试界面的时候还显示了不允许跨域。错误信息如下： Access to XMLHttpRequest at‘http://localhost:8000/carInfo/carCondition/1/4’ from origin‘http://localhost:9528’ has been blocked by CORS policy: Response to preflig

使用Nginx 如何解决Access-Control-Allow-Origin问题

最新发布

工作中学习，学习中进步

06-12

493

摘要： CSS引用字体文件因跨域问题被拦截时，可通过Nginx配置解决。在对应路由的location块中添加Access-Control-Allow-Origin *等响应头，允许跨域请求。若拦截路径非根路由（如/api），需在特定location中配置。示例代码展示了完整CORS头设置，包括允许的请求方法和标头。此方法适用于前端资源跨域加载失败场景。（字数：98）

后端的controller加了@CrossOrigin还是显示跨域错误问题

weixin_45822548的博客

12-21

379

错误记录

加了@CrossOrigin ,仍然报跨域错误

m0_47943986的博客

09-13

1833

问题处理

（vite）后端的controller加了@CrossOrigin还是显示跨域错误问题

weixin_58334531的博客

10-01

631

---------------------------------捣鼓了vite的proxy代理失败一天一夜之后----------------------------------------终于找到了错误根源。坑死我了，我就说后端明明跨域了，一个小小的破斜杠。，/findAll改成/findAll/

http跨域问题解决方案（No 'Access-Control-Allow-Origin' header is present on the requested resource）

eleven的博客

11-30

2851

说说我出现跨域的场景：在做前后端分离的项目，前端使用9000端口访问，但是请求后端的端口是8080，于是请求之后可以接受到json数据，但是前端出现错误Access to XMLHttpRequest at 'http://localhost:8080/web/admin/commodityManager/lisCommodityBySkuOr' from origin 'http://l...

【BUG日记】【VUE】【JAVA】后端已经添加上@CrossOrigin，前端还是显示Access to XMLHttpRequest...

南方者的博客

10-21

1243

【日期】： 2021/10/21 【问题】：后端已经添加上@CrossOrigin，前端还是显示 Access to XMLHttpRequest at ‘localhost:0209/aduicloud/essay/getList’ from origin ‘http://localhost:1109’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http

后端加了跨域注解还是不行_Spring Boot 2.x（九）：遇到跨域不再慌

weixin_39755873的博客

12-09

1178

什么是跨域首先，我们需要了解一下一个URL是怎么组成的： // 协议 + 域名（子域名 + 主域名） + 端口号 + 资源地址 http: + // + http://www.baidu.com + :8080/只要协议，子域名，主域名，端口号这四项组成部分中有一项不同，就可以认为是不同的域，不同的域之间互相访问资源，就被称之为跨域。随着前后端分离开发的越来越普及，会经常遇到跨域的问题，...

后端已经允许了跨域，前端依然报跨域错误，研究一下 Access-Control-Allow-Credentials...

热门推荐

weixin_33774615的博客

05-17

1万+

即使后端已经允许了跨域，但是前端依然报一个跨域错误。 Access to XMLHttpRequest at 'http://localhost/api/admin/authorizations' from origin 'http://localhost:9528' has been blocked by CORS policy: Response to preflight request...

[错误日记]在springboot中添加了@CrossOrigin注解但还是出现跨域问题

qq_46070067的博客

11-20

1768

添加了@CrossOrigin注解但还是出现跨域问题

报错：No ‘Access-Control-Allow-Origin‘ header is present on the requested resource（SpringBoot中解决跨域问题）

hui_ziyi的博客

04-16

1165

前后端联调的时候，经常会出现跨域问题，也就是出现以下报错： Access to fetch at 'http://xxxxxxxx:xxxx/uploadExcel' from origin 'http://localhost:xxxx' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response s

后端加了跨域注解还是不行_Swoft2 小白教程系列跨域与中间件

weixin_39670511的博客

11-26

229

一、什么是跨域？同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSRF等攻击。所谓同源是指”协议+域名+端口”三者相同，即便两个不同的域名指向同一个ip地址，也非同源。同源策略限制内容有：Cookie、LocalStorage、IndexedDB 等存储性内容DOM 节点AJAX 请求发送后，结果被浏览器拦截了但是有三个标签是允许跨域...

请教一个关于前端往后端传文件的时候controller上加了@CrossOrigin还是会报跨域错误的问题

KIRGKLEO的博客

11-17

1295

** 请教一个关于前端往后端传文件的时候的跨域问题 ** 最近在做一个开源项目前端是elment模板+vue 后端用的是springboot 都是运行在本地的 nginx做反向代理这是前端代码这是后端controller部分这是nginx配置的反向代理往后端传文件的时候还是会报这个错误请教下大家这个问题该怎么解决 ...

SpringBoot使用@CrossOrigin注解后，图片文件上传失败解决方案

思量的博客

11-11

730

@CrossOrigin //springboot通过跨域请求的注解在类上面使用@CrossOrigin注解后按理说应该是可以解决跨域问题的，在一般的数据传输当中是没出现问题的，在别人的博客中找到资料说@CrossOrigin注解默认开启了get，post，以及head请求但是在使用图片文件上传的时候却实现了跨域问题，通过查证资料有两种解决方案解决方案一： @CrossOrigin(methods = {RequestMethod.GET, RequestMethod.POST,..

Spring改写mybatis项目中前端报错No 'Access-Control-Allow-Origin' header is present跨域报错

woshidatuzi的博客

03-30

320

本人是初学Spring的小白，今天在改写自己曾经写过的Mybatis版本的增删改查数据库的时候，使用了前后端分离，我把后端写在了server模组中，前端写在client模组中但是在调试过程中，前端出现了报错，始终无法跨域访问到数据库说一下解决方案 1.首先确认在@controller控制器类中加上了 @CrossOrigin 注解这个注解就是为了允许跨域访问 2.第二点就是我遇到的比较...

crossorigin注解添加了解决不了跨域问题_前后端分离跨域终极解决方案，这一篇就够了...

weixin_39854951的博客

01-15

2028

一、基于过滤器的CORS支持(Spring Boot项目)Spring框架还提供了CorsFilter。在这种情况下，不用使用@CrossOrigin或 WebMvcConfigurer#addCorsMappings(CorsRegistry)，例如，可以在Spring Boot应用程序中声明如下的过滤器： 1packagecom.card.config; 2 3importorg...

前端 been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

03-21

### 跨域问题解决方案跨域资源共享（CORS, Cross-Origin Resource Sharing）是一种安全机制，用于防止浏览器中的恶意脚本攻击。当客户端尝试向不同源的服务器发送请求时，如果目标服务器未设置允许的 `Access-Control-Allow-Origin` 头部，则会触发跨域错误。以下是几种常见的解决方法： #### 方法一：使用 Chrome 插件临时解决问题可以通过安装 **Allow CORS: Access-Control-Allow-Origin** 插件来快速解决开发阶段的跨域问题[^1]。启用该插件后，它会在 HTTP 请求头中自动添加 `Access-Control-Allow-Origin: *` 字段，从而绕过浏览器的安全限制。需要注意的是，这种方法仅适用于本地调试环境，在生产环境中不可依赖此类工具。 #### 方法二：在服务端配置 CORS 支持对于基于 Spring Boot 的后端应用，可以利用 `@CrossOrigin` 注解实现细粒度控制。例如，将注解放置在 Controller 类上可使整个类支持跨域访问；放置于特定方法之上则只针对单个接口生效[^2]。 ```java @RestController @RequestMapping("/api") public class ExampleController { @GetMapping("/data") @CrossOrigin(origins = "*", maxAge = 3600) public ResponseEntity<String> getData() { return ResponseEntity.ok("This data can be accessed from any origin."); } } ``` 上述代码片段展示了如何通过 `@CrossOrigin` 注解指定允许的所有来源 (`*`) 并定义缓存时间 (maxAge)[^2]。 #### 方法三：调整前端项目的网络请求基础 URL 某些情况下，修改前端框架内的 API 地址也可能缓解部分跨域现象。比如 Vue.js 或 React 应用程序可能因为代理配置不当而引发不必要的跨域冲突。确保开发模式下的 host 设置指向 localhost 可能有助于规避这类情况的发生[^4]。 #### 方法四：手动设置响应头部信息除了采用框架内置功能外，还可以直接操作 Web 容器或者中间件层面上的相关参数。以 Nginx 配置为例，可以在 server block 中加入如下指令： ```nginx add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization'; ``` 这些语句的作用在于显式告知客户端哪些外部站点被授权以及它们所能执行的操作种类[^3]。 --- ### 总结综合来看，最推荐的方式是在实际部署的服务端做好全面的支持规划——即合理运用诸如 `@CrossOrigin` 这样的声明式手段或是定制化处理逻辑完成必要的权限授予过程。与此同时也要注意保护敏感数据不被非法获取。