美文网首页
vue前端配置代理实现跨域请求

vue前端配置代理实现跨域请求

作者: YJ_1101 | 来源:发表于2020-03-23 13:51 被阅读0次

    跨域的解决方法:
    设置让服务器允许跨域,使用nginx反向代理服务器实现

    在config.js中配置
    config配置官网:https://cli.vuejs.org/config/#devserver-proxy

    devServer: {
        host: '0.0.0.0',
        port: port,
        proxy: {
          [process.env.VUE_APP_BASE_API]: {
            target: `http://localhost:4040`, // 该url为你所要请求数据的地址,并非本地前端运行地址
            changeOrigin: true, // 支持跨域
            pathRewrite: {
              ['^' + process.env.VUE_APP_BASE_API]: ''
            }
          }
        },
        disableHostCheck: true
      }
    

    上面的target为所要请求数据的地址。这么说吧,4000端口是服务器端口,一般前端服务器默认是8080端口!你现在因为端口不同需要跨域,所以要指定跨域的地址!

    前端正常发送请求即可
    请求http://localhost:8080/adminapi/会代理请求http://localhost:4040/

    同时记得重启项目,因为项目配置文件改变了!!!

    相关文章

      网友评论

          本文标题:vue前端配置代理实现跨域请求

          本文链接:https://www.haomeiwen.com/subject/evhwyhtx.html