VUE使用el-upload做上传遇到跨域问题

跨域问题网上搜索很多，感觉情况都不一样，我这里说说我遇到得问题，记录下。

先说说上传吧，我使用element框架，刚开始以为简单得使用<el-upload>就行了，其实这个别人封装好的，但你上传的时候还需要一个接收用的服务，这个文件接收的服务是同事用C#写的，我就不过多阐述。

我所了解得跨域就是两个，要么后端修改，要么前端修改，我看都是需要修改的，改需要根据具体情况修改。

要了解什么是跨域百度下：blog.****.net/yao940622/a…

 

问题抛出

我们上传文件会报：No 'Access-Control-Allow-Origin' header is present on the requested resource.错误

网上教了很多方法解决跨域问题

1.谷歌浏览器安装 'Access-Control-Allow-Origin插件

2.电脑的2273端口打开，也就是入站规则添加这个

3.关闭防火墙

---等等

---以上一一尝试都不行，最好验证通过了发现与这些没有关系。

只有再nginx服务设置Access-Control-Allow-Origin *; 这个*就是任意的意思

 

为了测试效果，使用的是localhost，可以用ip地址试试

 

一、首先改服务端

首先文件接收的服务要加上允许配置的东西，也就是允许所有的请求，无论是post、get等，C#大概配置是：

<system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Methods" value="OPTIONS,POST,GET" />
        <add name="Access-Control-Allow-Headers" value="x-requested-with,content-type" />
        <add name="Access-Control-Allow-Origin" value="*" />
      </customHeaders>
    </httpProtocol>

    <modules runAllManagedModulesForAllRequests="true"/>
  </system.webServer>

注意：---最好是自己写个C#的demo客户端模拟测试下这个接口是不是能正常使用，如果可以就接下来操作，否则都白干。

这里文件服务给出的文件接收端口为：http://localhost:2273/xxxx/

 

 

二、修改前端

再VUE的配置vue.config.js文件中添加跨域请求，

// 代理跨域请求 //xxxx是指文件接收的接口
        proxy: {
            "/xxxx": {
                // target: "http://localhost:8080/api",
                target: "http://127.0.0.1:2273/",
                changeOrigin: true,
                secure: false,
                pathRewrite: {
                    // "^/api": "./"
                    "^/xxxx": "/xxxx"
                }
            }
        }

文件全部的内容为：

const debug = process.env.NODE_ENV !== "production";

module.exports = {
    configureWebpack: (config) => {
        if (debug) {
            config.devtool = "source-map";
        }
    },
    publicPath: "/dist",
    lintOnSave: false,
    productionSourceMap: debug,
    runtimeCompiler: true,
    devServer: {
        // 默认会自动打开浏览器
        open: false,
        https: false,
        port: 8090, // 端口
        // 错误、警告在页面弹出
        overlay: {
            // warnings: true,
            errors: true
        },
        // 代理跨域请求
        proxy: {
            "/xxxx": {
                // target: "http://localhost:8080/api",
                target: "http://127.0.0.1:2273/",
                changeOrigin: true,
                secure: false,
                pathRewrite: {
                    // "^/api": "./"
                    "^/xxxx": "/xxxx"
                }
            }
        }
       

    },
}

 

任何我们使用element框架中的el-upload，小白在这里不需要做过多的改动（全部用官网的），只关注action路径，

这里action不要添加“http://localhost:2273/xxxx/ ”，因为在配置里已经添加了IP和端口。只按照下面写即可

 <el-upload
                        class="upload-demo"
                        drag
                        ref="upload"
                        
                        action=" xxxx"
                        multiple>
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                      </el-upload>

也可以：

<el-upload
                        class="upload-demo"
                        drag
                        ref="upload"
                        action=" http://192.168.0.1:8080/xxxx/"
                        multiple>
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                      </el-upload>

 

这里我们部署到nginx中，正式环境运行，发现报错

POST http://localhost:8091/dist/xxxx/ 404 (Not Found)

这里的http://localhost:8091/dist是我们直接浏览器输入访问web的地址，但是我们的接口地址（端口是2273），即：http://localhost:2273/Default.aspx/

因为我们用的：action=" Default.aspx"，这个是相对路径，我们修改下：

action=" /Default.aspx/"

重新加载上传测试，发现又报错：唯一的区别就是没有了dist，就是端口不对。

POST http://localhost:8091/xxxx/ 404 (Not Found)

可我们正式环境部署是这个地址啊，这就需要我们修改服务部署环境---nginx反向，请看下面

 

 

三、修改服务部署（nginx反向）

因为我的前端部署是使用nginx服务（如果你用其他的就看看其他的），所有这个服务是需要部署，也就是nginx反向原理，再配置文件加上下面的即可

//xxxx是指文件接收的接口

location /xxxx {
           			
			add_header Access-Control-Allow-Origin *;
			proxy_pass http://localhost:2273/xxxx; 
        }

在测试的时候，修改后就要先杀掉进程，重新启动。

 

这里要说下，我们什么时候需要修改nginx服务反向呢？

例如我们打开浏览器输入web地址为：http://localhost:8080/dist

但是我们上传得时候，浏览器报错：http://localhost:8080/xxxx   ，这个就是还是用nginx服务得地址，端口号跟输入地址一样，而不是上传接口得地址：http:// localhost :2273/xxxx

这时候就考虑nginx反向问题了。

如果是浏览器报错：http://localhost:8080/dist/xxxx ，这个就是再vue页面设置得路径不对；

 

注意：服务一定要先打开，别忘记哦！！！如果还不行，那肯定是文件接收服务没有写好，这个要自己确认下。

总结：重点是：1.前端得el-upload配合配置文件请求跨域设置，见二修改前端； 2.就是nginx反向的问题，见三修改nginx反向，直接复制。 如果都不行，90%得问题出在文件接收服务没有写好，为防止非同源原因导致，让写文件接收服务的自己写个demo测试下。