上传文件跨域报错

最新推荐文章于 2024-06-26 09:55:19 发布
最新推荐文章于 2024-06-26 09:55:19 发布
阅读量636 收藏
点赞数
分类专栏： SpringCloud
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Smy_0114/article/details/115522558
版权
博客讲述了在系统架构中，由于nginx代理了后端网关，导致上传文件超过1M时出现跨域错误。问题的关键在于nginx的默认上传大小限制。解决方案是修改后端网关的nginx配置，特别是针对8080端口的设置，以允许更大的文件上传。通过调整此设置，成功解决了跨域上传大文件的问题。
摘要由CSDN通过智能技术生成

系统架构：nginx+前端->nginx+后端gateway

对没看错就是后端的网关被nginx代理了，那么问题来了上传文件超过1M就会报错跨域，是因为nginx代理了网关，nginx默认是1M。

一开始在前端的nginx里面瞎改，导致一直不成功，后来一想恍然大悟是在后端的nginx里面改。

查看网关是不是被nginx代理。

 

修改代理网关的nginx。8080是网关的端口。

 

RT_0114
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用nginx转发+上传文件遇见的坑
qq_25073953的博客
08-24 2112
线上运行的项目，突然用户反馈上传文件接口上传不了文件了，于是登陆系统上进行查看，发现有时可以上传成功但有时又上传不了，分析了以下，应该是有一台服务器出了问题，会不会是前端包有问题呢？于是把两台服务器的前端包都导了下来，对比了一下，发现没有问题，因为前端是嵌在企业微信端，所以无法查看前端日志，遂只能查看nignx的日志，对比两台服务器的日志，发现一台服务器的上传日志是： { "uri": "***********************", "remote_addr": "***************..
跨域文件上传
weixin_50688830的博客
05-24 1188
一.IDEA中操作 1.修改pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion&
VUE+SpringBoot上传文件后端报错并且前端报“跨域问题”
醉生梦死的博客
08-15 827
测试环境测试上传功能，突然发现上传失败，打开浏览器报跨域错误。
关于前端上传文件到后台，文件大小超出限制，导致上传失败的解决办法。
qq_45985929的博客
04-25 7860
文章出处：Jiangkuobo，微信：jkb_267460 文章目录前言一、使用elementPlus上传图片，出现的问题。二、验证猜想1.验证方式：2.测试结果：3.我的猜想与验证三、关于elementPlus组件上传文件限制大小的解决方法四、新的问题1.spring报错：2.解决方式：总结 前言 最近在做一个后台管理系统时，上传图片没有正常上传成功，总结一下其中遇到的问题，和解决方式。-------关于前端上传文件到后台，文件大小超出限制，导致上传失败的解决办法。 一、使用elementPlus上.
vue3 上传文件时解决跨域问题
最新发布
lryh_的博客
06-26 1015
在开发环境中，可以通过配置开发服务器的代理功能，将请求代理到后端服务器。这样浏览器认为请求是同源的。target: 'https://example.com', // 后端服务器地址。确保后端服务器允许跨域请求。可以在服务器的响应头中添加 CORS 相关的头信息。withCredentials: true // 允许携带cookie等信息。有一些第三方库可以帮助处理文件上传并且支持跨域请求，比如。在 Vue CLI 项目中，可以在。// 处理文件上传逻辑。
【Debug】关于 nginx 上传文件时出现 413 及 500 错误码解决方法
Fug_Lee的博客
11-15 1880
Nginx 作为一个高性能的 HTTP 和 反向代理 web 服务器具有占用内存少, 并发能力强等特点,可以说 Nginx 专为性能和效率而生, 如 tomcat 的并发量大约在 100 多, 而 Nginx 的并发量可以达到 5 万之多; Nginx 的主要作用还是反向代理, 实现负载均衡, 何为反向代理,
文件上传漏洞？ 看这一篇就够了-Nginx解析漏洞 修改后缀绕过前端验证 00%截断 安鸾靶场练习
AAAAAAAAAAAA66的博客
12-31 4645
靶场地址 首页 : 安鸾渗透实战平台 - 安鸾学院 目录 文件上传漏洞利用条件 Nginx解析漏洞 文件上传01 （绕过前端验证） 文件上传02 00%截断​ 文件上传漏洞利用条件 1.可以上传php文件，或者上传的文件可以被解析为php文件 2.可以找的到文件上传后的路径 Nginx解析漏洞 该漏洞与Nginx、php版本无关，属于用户配置不当造成的解析漏洞。 实际上就是由于判断文件后缀出现问题，导致我们可以添加一个/.php 后缀 使得系统解析图片木马为php文..
Nginx教程（小白必看，看了必会，不看血亏），
热门推荐
S_ZaiJiangHu的博客
09-13 1万+
Nginx是lgor Sysoev为俄罗斯访问量第二的rambler.ru站点设计开发的。从2004年发布至今，凭借开源的力量，已经接近成熟与完善。Nginx功能丰富，可作为HTTP服务器，也可作为反向代理服务器，邮件服务器。支持FastCGI、SSL、Virtual Host、URL Rewrite、Gzip等功能。并且支持很多第三方的模块扩展。Nginx的稳定性、功能集、示例配置文件和低系统资源的消耗让他后来居上，在全球活跃的网站中有12.18%的使用比率，大约为2220万个网站。
上传文件超过1M，报跨域错误
qq_37024565的博客
03-04 2696
文章目录上传文件超过1M，报跨域错误问题现象:定位过程:解决方案： 上传文件超过1M，报跨域错误 问题现象: 今天在和前端同事调试商品管理功能时候，给商品上传图片不能正常上传。抛出: Access to XMLHttpRequest at 'https://xxx/manageapi/file/upload' from origin 'http://xxx:18080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' hea
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
10-16
总结起来，解决LayUI图片上传时的跨域问题，主要是通过后端设置CORS策略、前端设置代理或者使用JSONP（针对GET请求）。在实际项目中，应根据具体的安全需求和场景选择合适的方法。同时，对于生产环境，确保配置正确...
使用Html5实现异步上传文件,支持跨域,带有上传进度条
09-28
在本文中，我们将深入探讨如何使用HTML5实现异步文件上传功能，同时支持跨域请求并展示上传进度条。这是一个非常实用的技术，特别是在现代Web应用中，用户常常需要上传大文件，而实时的进度反馈可以提供更好的用户...
原生JS上传文件，获取文件二进制数据及文件大小和文件名称
07-07
实际应用中，你可能还需要处理多文件上传、进度显示、错误处理、跨域上传等问题。例如，你可以使用`FormData`对象来收集多个文件和其他表单数据，然后通过`fetch`或`XMLHttpRequest`发送到服务器。如果需要在上传前...
js关于getImageData跨域问题的解决方法
11-30
当尝试从非同源（即不同域名或协议）的资源中获取图像数据时，浏览器会触发跨域安全策略，这导致 `getImageData()` 报错。在提供的代码示例中，`createGSCanvas()` 函数试图在本地文件系统上加载图片到Canvas，然后...
图片上传文件上传封装好了方法
07-12
在IT行业中，文件上传是常见的功能，特别是在网页和应用程序中处理用户输入的图像或文档时。标题"图片上传文件上传封装好了方法"表明我们有一个已经完成的、优化过的代码实现，用于处理图片上传过程。这个过程通常...
Nginx配置文件上传最大限制，解决提示 client intended to send too large body
BADAO_LIUMANG_QIZHI的博客
04-26 9350
场景 使用Nginx配置前端dist并做反向代理，在进行上传文件时提示： client intended to send too large body: 1049854 bytes 注： 博客：霸道流氓气质的博客_CSDN博客-C#,架构之路,SpringBoot领域博主 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 1、这是因为在nginx中设置的最大文件过小或者没有设置导致的。 打开nginx.conf配置文件 添加如下配置 # 配
上传较大文件报跨域CORS
JFENG14的博客
12-16 1184
上传较小的文件没有问题，但是上传较大的文件会报跨域 且检查过php的相关配置，没有问题 使用接口工具调试提示错误：413 Request Entity Too Large 发现是nginx的配置问题，可以通过修改nginx的client_max_body_size配置来修改请求的大小限制 server{ client_max_body_size 50m; # 修改成自己的想要设置的值 } 修改完后重新加载 nginx -s reload ...
文件上传接口跨域
小新的博客
04-04 1007
项目中所有接口都正常,只有文件上传的接口报跨域问题。
Nginx的跨域问题解决
认知 行动 坚持
10-03 756
主要从以下方面进行解决： 1.什么情况下会出现跨域问题？ 2.具体的解决方案是什么? 1.首先跨域指的是浏览器不能执行其它网站的脚本，它是由浏览器的同源策略造成的，是浏览器对JavaScript 施加的安全限制。 2.浏览器在执行脚本的时候，都会检查这个脚本属于哪个页面，即检查是否同源，只有同源的脚本才会被执行；而非同源的脚本在请求数据的时候，浏览器会报一个异常，提示拒绝访问。 No 'Access-Control-Allow-Origin' header is present on the reque
nginx 上传文件大小限制_nginx跨域设置&文件上传大小限制
weixin_39945816的博客
11-28 1288
在部署项目的时候碰到这么一个问题：XMLHttpRequest cannot load，下面阐述一下这个问题问题背景：用nginx+tomcat部署项目。tomcat用的8080端口，nginx用80代理8080端口。项目成功启动，但凡事涉及到ajax的数据调用全部都报 XMLHttpRequest cannot load的错问题原因：由于同源策略的限制，XmlHttpRequest只允许请求当前...
Uniapp uploadfile 跨域报错
07-20
Uniapp中使用uni.uploadFile进行文件上传时，如果涉及跨域请求，可能会出现跨域报错。解决跨域问题的方法有以下几种： 1. 在服务器端设置允许跨域访问：在服务器端的响应头中添加Access-Control-Allow-Origin字段，允许指定的域名或通配符（*）进行跨域访问。 例如，在Node.js的Express框架中，可以使用cors库来设置允许跨域访问： ```javascript const express = require('express'); const cors = require('cors'); const app = express(); app.use(cors()); // 处理文件上传的路由 app.post('/upload', (req, res) => { // 处理文件上传的逻辑 }); // 启动服务器 app.listen(3000, () => { console.log('服务器已启动'); }); ``` 2. 使用代理服务器：在uniapp的`config.js`配置文件中，可以配置一个代理服务器，将跨域请求转发到服务器端，从而避免跨域问题。 在`config.js`文件中添加以下代码： ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://example.com', // 实际请求的接口地址 changeOrigin: true, pathRewrite: { '^/api': '' // 如果请求的接口路径有前缀，需要将其替换为空字符串 } } } } } ``` 然后，在uniapp中使用`uni.uploadFile`时，将请求的地址设置为`/api/upload`，例如： ```javascript uni.uploadFile({ url: '/api/upload', // 其他参数... }); ``` 这样，uniapp会将`/api/upload`的请求转发到`http://example.com/upload`。 3. 使用JSONP请求：如果服务器端支持JSONP跨域请求，可以将文件上传接口改为支持JSONP，并在uniapp中使用uni.request进行请求。 在服务器端将文件上传接口改为支持JSONP： ```javascript app.get('/upload', (req, res) => { const callback = req.query.callback; const result = { code: 0, message: '上传成功' }; const jsonpResult = `${callback}(${JSON.stringify(result)})`; res.send(jsonpResult); }); ``` 然后，在uniapp中使用uni.request进行请求： ```javascript uni.request({ url: 'http://example.com/upload', method: 'GET', dataType: 'jsonp', success(res) { console.log('文件上传成功', res.data); }, fail(err) { console.error('文件上传失败', err); } }); ``` 以上是解决Uniapp中使用uni.uploadFile跨域报错的几种方法，根据你的实际情况选择合适的方法进行处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值