跨域问题网上搜索很多,感觉情况都不一样,我这里说说我遇到得问题,记录下。
先说说上传吧,我使用element框架,刚开始以为简单得使用<el-upload>就行了,其实这个别人封装好的,但你上传的时候还需要一个接收用的服务,这个文件接收的服务是同事用C#写的,我就不过多阐述。
我所了解得跨域就是两个,要么后端修改,要么前端修改,我看都是需要修改的,改需要根据具体情况修改。
要了解什么是跨域百度下:跨域 No 'Access-Control-Allow-Origin' header is present on the requested resource._lily-0622的博客-CSDN博客
问题抛出
我们上传文件会报: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测试下。