Vue-cli3下的Axios跨域问题（已解决）

跨域是什么这里题主就不再讲解了，百度一下即可（大致来说就是请求来源与请求目标域名，端口号，协议中有一个不同的就会产生跨域请求）

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）打头即可。