引起跨域CORS报错的原因有很多种!!!!!
这里我的报错属于最后一条。
探索的原因
正常axios请求接口,调试接口时出现以下问题
Access to XMLHttpRequest at 'http://192.168.31.111:9000/api/user/session' from origin 'http://localhost:8080' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values 'http://localhost:8080, *', but only one is allowed.
报错的大致描述是:从http://localhost:8080
源访问http://192.168.31.111:9000/api/user/session
处的XMLHttpRequest已被CORS策略阻止:Access- control - allow - origin
头包含多个值http://localhost:8080, *
,但只允许一个值。
探索的过程-1
前端使用vue框架,配置反向跨域代理请求。
发现问题,反向代理失效,(代理地址为IP号+端口号)
发送请求:(直接使用axios)
let res = await http.post("/api/user/session",{
account:"admin",password:'123456'
})
做反向代理:
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false,
devServer:{
proxy:{
"/api":{
target:"http://romatserver.com:9000",// 请求的真实的地址
//target:"http://192.168.111.31:9000",// 请求的IP的地址--失效
changeOrigin:true,// 修改请求主机头,为了让代理更有隐蔽性
}
}
}
})
这种过程是没问题的,详细可以参考我之前写的这两篇文章
使用vue配置代理服务器解决跨域连接
详解vue中proxy代理的用法(解决跨域问题)
探索的过程-2
当使用Vue配置网络代理时,有时候在设置代理时指定IP地址可能会导致代理失效的问题。这通常是由于网络环境或代理服务器设置的问题引起的。问题是,服务器没有域名.考虑本机做域名解析来定位问题。
探索的过程-3
mac使用终端 修改host文件,
这样操作系统会自己去解析这个域名。但这不是解决办法,是我探索过程中的手段,最终这个现象还是需要后端老师支持解决。
使用命令行 sudo vi /etc/hosts 打开host
输入i进入编辑模式
我们在下面的位置加上要配置的 ip+空格+域名 就好了。
退出是:`按esc键,再按shift+:键,再按wq!。即可保存退出`
这样就算服务器没有域名,自己也可以通过这种手段来实现。
跨域请求解决方法----不允许有多个 ‘Access-Control-Allow-Origin’ CORS 头
已拦截跨源请求:(原因:不允许有多个 ‘Access-Control-Allow-Origin’ CORS 头)。
通过这种手段虽然可以拿到数据