Vue3+node开发过程中解决Element Plus中上传文件出现跨域问题以及图片访问不成功

最新推荐文章于 2024-05-29 14:24:36 发布
最新推荐文章于 2024-05-29 14:24:36 发布
阅读量697 收藏 12
点赞数 10
分类专栏： vue+node 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_63112310/article/details/134966172
版权

#解决跨域问题#

先安装cors:npm i cors

然后在后端的app.js文件中配置cors（我这里用的是express搭建的后台）

解决跨域问题之后前端访问图片地址为：（后端服务器地址+静态资源目录的图片）

但是一开始访问时总是报这个错误：

我写的图片地址是这样的： 

因为访问的是静态资源应该把public删掉才能正常访问：

在线喝水
关注
  • 10
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue项目上传服务器跨域,vue使用el-upload 跨域上传文件跳坑小记
weixin_32821477的博客
08-11 2364
一：首先说一下什么是跨域，跨域就是解决浏览器同源策略的问题。php那话又说回来了，什么是同源策略呢，(名词解释：同源策略(Same origin policy)是一种约定，它是浏览器最核心核心也最基本的安全功能，缺乏了同源策略，则浏览器的正常功能可能都会受到影响。能够说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。) 简单来讲同源策略就是为了保证用户信息安全，放着窃取数据从...
laravel-8-vue：laravle8 + vue3 + vue-router4 + element-plus
02-26
Laravel减轻了许多Web项目中使用的常见任务，从而减轻了开发过程中的痛苦，例如： 。 。 用于和存储的多个后端。 直观的表达 。 数据库不可知。 。 。 Laravel易于访问，功能强大，并提供大型，强大的应用程序所需...
【Element Ui】vue3中 el-upload 上传文件跨域问题
最新发布
alikami的博客
05-29 360
vue3中 el-upload 上传文件跨域问题
element-plus的el-image跨域
黄彪博客
04-30 349
在项目开发中，使用element-plus UI框架的 el-image 控件，目的是为了查看图片详情（原始图片），由于。，控制台报错，提示跨域。
vue3 element plus使用el-upload上传出现跨域问题
Stubborn_My的博客
02-20 933
今天在写上传的时候遇到了一个跨域问题 反复看了代理 没有错 又在抓头的想了半天 后来发现传参的形式不对 没有用formData 后台改写了一下。request.post('去请求地址',formdata,{
Element文件上传-解决跨域
热门推荐
WEN38306482的博客
11-07 21万+
Element文件上传-解决跨域
跨域情况下图片无法访问，展示默认图片
LOVE_mingjing的博客
04-17 424
在main文件内 创建一个 自定义指令及对应方法。v-default-img 原始图片（网图）src 展示默认图(本地或网图）
Vue中使用el-uploda上传文件时出现跨域问题
weixin_42329970的博客
09-02 2448
Vue中使用el-uploda上传文件时出现跨域问题 主要在我spring boot后端整合shiro进行权限控制时出现的 问题如下，在发起请求后浏览器一直提示出现跨域拦截 前端vue上传代码如下，报错提示头部缺少了Access-Control-Allow-Origin 前端vue代码如下 <el-upload class="uploadTemplate" name="file1" :action="uploadExcel()" :on-su
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip
04-12
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip 基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip 基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip 基于...
vue3-element-admin：vue3 + element-plus + typescript 后台管理系统
05-04
vue3-element-admin 是【有来开源组织】基于 Vue3 + Vite4 + TypeScript + Element-Plus + Pinia 等前端主流技术栈从0到1搭建后台管理系统模板（前后端开源）。 后端是基于 Spring Boot 3.0 、Spring Security 6.0 ...
vue 跨域配置解决方案
11-14
1、在使用vue开发的时候经常要涉及到跨域的问题，其实在vue cli中是有我们设置跨域请求的文件的。 2、当跨域无法请求的时候我们可以修改工程下config文件夹下的index.js中的dev:{}部分。 dev: { env: require('./dev.env'), port: 8080, autoOpenBrowser: false, assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/api': { target: 'http://api.douban.com/v2', changeOrigin: true, pathRewrite: { '^/api': '' } } }, // CSS Sourcemaps off by default because relative paths are "buggy" // with this option, according to the CSS-Loader README // (https://github.com/webpack/css-loader#sourcemaps) // In our experience, they generally work as expected, // just be aware of this issue when enabling this option. cssSourceMap: false } 将target设置为我们需要访问的域名。 3、然后在main.js中设置全局属性： Vue.prototype.HOST = '/api' 4、至此，我们就可以在全局使用这个域名了，如下： var url = this.HOST + '/movie/in_theaters' this.$http.get(url).then(res => { this.movieList = res.data.subjects; },res => { console.info('调用失败'); });
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...
基于vite+vue3+pinia+element-plus+ts后台管理系统
04-08
它使用了最新的前端技术栈、动态路由，权限验证，并且有着丰富的组件,企业级中后台解决方案，同时支持PC、平板、手机 。
vue整合editormd上传图片解决跨域问题
qq_35818188的博客
04-11 1102
背景描述： 最近在写一个前后端分离的项目，需要在vue整合一个富文本编辑器，因为以前用spring boot郑和国editormd，个人也喜欢editormd的样式，所以选择了它，从整合起就各种问题，拿不到html等，接下来详细谈一谈图片上传跨域问题 首先这个是使用官方默认的image-dialog.js，下方就是官方带来的错误，和大家一样的经历就是各种百度，就是查不出所以然来，明明数据已经返回到...
vue跨域问题
jingshuyunsi的博客
08-13 243
vue跨域问题 1.使用input方法进行文件上传，会有跨域问题 2.使用element进行文件上传 ，也会出现跨域问题 3.在后端解决： 3.1添加 @CrossOrigin解决无效 3.2添加 response.setHeader("Access-Control-Allow-Origin", "*"); 解决无效 4.在前端解决： 4.1添加 <meta http-equiv="Access-Control-Allow-Origin" content="*"> 解决无效 4.
element UI 上传图片跨域
p_pppxxxxmmm的博客
07-29 7959
element ui 解决上传图片跨域 近期项目有上传图片功能，项目用的是element UI 搭的vue 框架，在看了官方文档之后，复制代码调式，浏览器一直提示跨域，百度了各种解决方法，都是无效，下面举例百度的方法： 方法一：配置文件：config>index.js dev: { // Paths assetsSubDirectory: "static", assetsPublicPath: "/", proxyTable: { "/api": { //
vue+element中解决upload跨域问题
canlynetsky的博客
06-07 1270
在vue + element UI中使用Upload 上传功能之所以在action里填写的URL无法自动使用vue里本来配置好的解决跨域的转发方案，是因为没有像普通Ajax请求（使用axios）一样给设置相同的头部路径。上面的转发配置代表请求以/api开始的时候，进行转发操作。我看到网上的文章写得太过复杂，所以我纠正一下，实践过的。这样设置后，本地调试、编译后运行，都不会有问题了。
文件上传跨域问题
weixin_42780940的博客
06-29 593
当使用el-upload上传文件时，如果产生跨域问题，我去掉了:with-credentials='true'设置,并且后端有token验证，将token设置在header中，如下所示： <el-upload :action="`${localUrl}${action}`" :before-upload="beforeUpload" class="upload" :data="data" :file-list="fileLis...
vue3+ts+vite+element plus中使用luckysheet
09-09
在Vue3 TS Vite Element Plus项目中使用Luckysheet，你可以按照以下步骤进行操作： 1. 准备一个Vue3 TS Vite Element Plus的项目，确保已经安装好相关的依赖。 2. 引入Luckysheet插件。你可以在Luckysheet官方文档中找到具体的引入方式和教程。 3. 根据教程中的指引，将Luckysheet添加到你的项目中。可以通过import语句引入Luckysheet的组件，并在Vue的模板中使用该组件展示Excel表格。 4. 根据需求，配置Luckysheet的属性和事件。Luckysheet提供了丰富的配置选项，你可以根据需要进行自定义，比如设置表格的大小、样式、数据源等。 通过以上步骤，你就可以在Vue3 TS Vite Element Plus项目中成功使用Luckysheet插件来展示大量数据的Excel表格了。希望对你有帮助！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值