el-upload上传文件跨域报错

最新推荐文章于 2023-05-24 16:04:00 发布
最新推荐文章于 2023-05-24 16:04:00 发布
阅读量1.7k 收藏 3
点赞数 1
文章标签： 接口
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zwy13608677461/article/details/112970035
版权

来源：新手首次处理vue+element-ui上传文件功能，由于卡的久于是过来打算分享出去遇到的问题。

问题：对接后端上传接口报跨域错误（除文件上传接口，其它接口正常访问，开始时后端已处理过跨域）

Access to XMLHttpRequest at 'http://file.example.com/api/upload' from origin 'http://127.0.0.1:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

VM8745:1 POST http://file.example.com/api/upload net::ERR_FAILED

解决办法：后端需要处理OPTIONS方法，PHP代码放入口文件；

if($_SERVER['REQUEST_METHOD'] == 'OPTIONS') exit(0);

 

今年第一次改BUG
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
上传文件时报错
qq_38862968的博客
12-23 264
2019-12-23 11:22:38.506 ERROR 12232 — [nio-9999-exec-4] o.a.c.c.C.[.[.[/].[dispatcherServlet] : Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception [Handler di...
详解Vue-cli代理解决跨域问题
01-19
使用vue-cli调接口的时候，总是会出现垮与问题，因为vue的localhost与访问域名不一致导致。而这一点，开发者显然也想到了，故而在vuejs-templates，也就是vue-cli的使用的模板插件里，有关于API proxy的说明，这个...
vue3 element plus使用el-upload上传出现跨域问题
Stubborn_My的博客
02-20 908
今天在写上传的时候遇到了一个跨域问题 反复看了代理 没有错 又在抓头的想了半天 后来发现传参的形式不对 没有用formData 后台改写了一下。request.post('去请求地址',formdata,{
关于el-upload文件上传的问题
qq_47556649的博客
10-21 5512
关于el-upload文件上传的问题
el-upload时批量上传图片时报错
找师父的小白的博客
04-18 535
批量上传图片时报错
Spring Boot 解决跨域Cores问题
岚殿的代码笔记
08-09 1258
import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; @Configuration public class CorsConfig implemen.
VUE使用el-upload做上传遇到跨域问题
测试领域专家，多领域测试技术、管理、工具都略懂，略懂一二
03-30 1万+
跨域问题网上搜索很多，感觉情况都不一样，我这里说说我遇到得问题，记录下。 先说说上传吧，我使用element框架，刚开始以为简单得使用<el-upload>就行了，其实这个别人封装好的，但你上传的时候还需要一个接收用的服务，这个文件接收的服务是同事用C#写的，我就不过多阐述。 我所了解得跨域就是两个，要么后端修改，要么前端修改，我看都是需要修改的，改需要根据具体情况修改。 要了解什么是跨域百度下：https://blog.csdn.net/yao940622/article/details
【前端】 CORS 跨域问题 （“No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.”）
悟空—
08-18 3436
服务端 设置请求头 允许跨域 @Override public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException { HttpServletResponse response = (HttpServletResponse) res; r
vue-socket.io跨域问题有效解决方法
11-21
报错信息： Access to XMLHttpRequest at ‘http://192.168.37.130:5050/socket.io/?EIO=3&transport=polling&t=N0oqNsW’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: No ‘Access-...
cross-request 3.1 YApi 跨域请求 谷歌浏览器
10-10
cross-request 3.1 YApi 跨域请求 谷歌浏览器
详解vue-cli3 中跨域解决方案
10-17
主要介绍了vue-cli3 中跨域解决方案，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下
Allow-Control-Allow-Origin最新谷歌跨域扩展插件下载
04-07
Allow-Control-Allow-Origin最新谷歌跨域扩展插件下载
关于使用element的upload组件上传文件报错问题
q12as的博客
05-24 2888
upload已经将数据转换为了formData类型，无需再次转换，直接上传获取到的数据即可。b.检查请求头部content-type类型是否为multipart/form-data。如果不是请自定义为multipart/form-data。a.创建一个formData对象。
【Element plus】upload上传下载（大小限制，重复上传限制，删除文件处理）
m0_67372185的博客
05-05 3580
upload组件，文件上传大小限制，重复上传限制，删除文件处理
el-upload调用接口上传失败依然回显问题解决
weixin_43965251的博客
08-09 4076
el-upload调用接口上传失败依然回显问题解决
解决has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’报错跨域问题
热门推荐
m0_46127185的博客
01-07 9万+
关于前后端分离踩过的坑 故事起因:前天晚上，在计划中学完了一个前端获取后端请求的框架叫axios。然后准备用axios、vue、以及fastapi（一个Python的web框架）写一个前后端分离的小demo。结果变成了事故，竟然报错了。 主要错误是：has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’。大概的意思是，已被CORS策略阻止：无“访问控制允许来源”。当时我也百度了一下CORS后来因为自己懒了，所以就去问一个朋友，然后
vue-element-admin has been blocked by CORS policy: Response to preflight request doesn‘t pass access
cc蒲公英的博客
03-30 1655
vue-element-admin has been blocked by CORS policy: Response to preflight request doesn't pass access 已被CORS策略阻止 CORS 跨域限制以及预请求验证
has been blocked by CORS policy: Response异常问题的 解决
shenxiaomo1688的博客
06-07 1万+
项目做前后端分离后，第一次遇到这种问题，在这里记录解决的过程。因为采用前后端分离开发，前端和和后台使用的端口号不一致。顺便说下跨域问题的来源： 1、访问协议不同 ，如http和https之间 2、访问地址不同 3、端口号不同 ...
操作系统期末复习笔记！
最新发布
06-13
操作系统期末复习笔记
el-upload的action接口报错302 CORS Error
05-25
HTTP 302是重定向的HTTP状态码，而CORS错误通常是因为浏览器在跨域请求时被阻止了。这可能是因为您的请求头缺少了必要的CORS信息，或者服务器没有正确配置CORS。 您可以尝试在请求头中添加以下信息： ``` { 'Access-Control-Allow-Origin': '*', // 允许所有来源 'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS', // 允许的请求方法 'Access-Control-Allow-Headers': 'X-Requested-With, Content-Type' // 允许的请求头 } ``` 如果您使用的是Express框架，可以使用cors中间件来自动处理CORS设置。您可以按照以下步骤安装和使用cors： 1. 安装cors：`npm install cors` 2. 在您的Express应用程序中，添加以下代码： ``` const cors = require('cors'); app.use(cors()); ``` 这将自动添加CORS头信息到所有请求中，从而避免CORS错误。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值