vue前端解决跨域

配置代码

新建一个文件：vue.config.js
代码如下

const path = require('path');
function resolve(dir) {
    return path.join(__dirname, dir)
}
  
module.exports = {
    //打包时不生成.map后缀文件
    productionSourceMap: false,

    lintOnSave: false,
    // 基本路径
    publicPath: "./",
    // 输出文件目录
    outputDir: "dist",
    // 用于嵌套生成的静态资产（js，css，img，fonts）的目录。
    assetsDir: "./",

    // devServer: {
    //     // 项目运行时候的端口号
    //     port: 8088,
    // },
    devServer: {
      open: true,
      // host: 'localhost',
      port: 8080,
      https: false,
      //以上的ip和端口是我们本机的;下面为需要跨域的
      proxy: {//配置跨域
        '/api': {
          // target: 'http://192.168.0.80:8080',//这里后台的地址模拟的;应该填写你们真实的后台接口
          target: 'http://192.168.0.98:8080',
          // target: 'http://192.168.0.153:8080',
          // target: 'http://192.168.0.208:8080',
          ws: true,
          changOrigin: true,//允许跨域
          pathRewrite: {
            '^/api': '/'//请求的时候使用这个api就可以
          },
        //   logLevel: 'debug' // 用于检查代理的真实地址
        }
      }
    },
    /**
     * 别名映射文件路径
     */
    chainWebpack: (config) => {
        config.resolve.alias
            .set('@', resolve('src'))
            .set('assets', resolve('src/assets'))
            .set('components', resolve('src/components'))
            .set('views', resolve('src/views'))
            .set('utils', resolve('src/utils'))
            .set('store', resolve('src/store'))
            .set('plugins', resolve('src/plugins'))
    },
    configureWebpack: {
    }
};

重点代码

封装post请求方法api.js文件

main.js文件

在实例中运用（直接写上接口名称就可以了）

如果不使用封装可以直接写成api/login/doLogin就可以了 api就是之前代理的地址http://198.168.0.98:8080