当我们在使用vue.js进行项目开发时,因为我们可以本地以localhost:port(端口号)这样形式启动项目进行本地调试,这个时候我们需要使用后端接口就会出现跨域问题,这是因为localhost和访问域名不一致造成,在vue-cli使用的模板插件中,就有解决这个问题的方法,它是通过使用node代理来将localhost映射成访问的域名。

我们是在config下的index.js文件中进行设置,一般我们使用vue-cli搭建好项目需要跨域只需要修改下面部分:

dev: {
    env: require('./dev.env'),
    port: 8686,   //这里的端口号每个项目对应一个,就可以直接访问localhost:8686
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
        '/api':{     //这里是公共部分,在调用接口时后面接不相同的部分,/api就相当于http://192.168.0.199:8926/api这一段
            target:'http://192.168.0.199:8926',   //这里写的是访问接口的域名和端口号
            changeOrigin: true, // 必须加上这个才能跨域请求
            // pathRewrite: {  // 重命名
            //   '^/api': ''
            // }
        }
    },

我们可以同时代理多个地址,此时我们已经完全解决了跨域问题,以及本地测试后台无法向我们本地环境设置cookie的情况了。

Logo

前往低代码交流专区

更多推荐