跨域是什么这里题主就不再讲解了,百度一下即可(大致来说就是请求来源与请求目标域名,端口号,协议中有一个不同的就会产生跨域请求)
tips:前后端分离的项目基本都会遇到
题主遇到的问题及解决办法
题主在Vue-cli3中使用Axios发送post请求访问Gateway模块时出现了403问题,请求没有送达至Gateway模块
题主预想的Axios请求步骤
npm安装axios,main.js中使用axios,在要使用axios请求的组件中引入,然后编写axios请求
emmm...如果你也是这么想的,恭喜你,那这篇博文说不定可以解决你的问题,因为这是正常初次接触axios的想法,我也是如此。
实际的Axios请求步骤
npm安装axios,main.js中使用axios,配置vue.config.js文件设置代理,在要使用axios请求的组件中引入,然后编写axios请求
当然,vue3-cli中是没有vue.config.js这个文件的,但是无妨,我们自己新建一个即可
下面给大家贴一下文件内容,解决跨域的重点是proxy里的数据,其中'/api'代表你所有的请求从匹配到/api开始会自动拼接上target中的地址然后发送给后端。
module.exports = {
/* 部署生产环境和开发环境下的URL:可对当前环境进行区分,baseUrl 从 Vue CLI 3.3 起已弃用,要使用publicPath */
publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
/* 输出文件目录:在npm run build时,生成文件的目录名称 */
outputDir: 'public',
/* 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录 */
assetsDir: "images",
/* 是否在构建生产包时生成 sourceMap 文件,false将提高构建速度 */
productionSourceMap: false,
/* 默认情况下,生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存,你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变) */
filenameHashing: false,
/* 代码保存时进行eslint检测 */
lintOnSave: true,
/* webpack-dev-server 相关配置 */
devServer: {
/* 自动打开浏览器 */
open: true,
port: 8082, //本地端口号
https: false,
hotOnly: false,
/* 使用代理 */
proxy: {
'/api': {
target: 'http://localhost:8098',//服务器协议、ip和端口号
secure: false, // 如果是https接口,需要配置这个参数
ws: true, //是否代理websockets
changeOrigin: true,
pathRewrite:{
'^/api':'api'
}
}
},
}
}
当你的接口正好含有‘/api’时,pathRewrite里面的内容可填'^/api':'/api'也可以选择不填
最后提醒大家一下,如果用了axios请求拦截器,请务必确认没有全局添加类似baseurl之类的东西。如果有,切记清除。所有的api只需以你设置的(我这里是/api)打头即可。