前端框架Vue-CLI配置反向代理解决跨域

3

Vue-CLI配置反向代理解决跨域

阅读:4868 时间:2018年10月29日

介绍在前后分离的项目开发中,调用后端的接口时难免会遇到跨域。通过Vue-CLI配置反向代理可以解决跨域。注:此方法只适用于本地开发。如发布到生产环境接口与前端在不同域,需服务器配置代理。配置方法打开项目中, config/index.js在module.exports配...

介绍

在前后分离的项目开发中,调用后端的接口时难免会遇到跨域。通过Vue-CLI配置反向代理可以解决跨域。

注:此方法只适用于本地开发。如发布到生产环境接口与前端在不同域,需服务器配置代理。

配置方法

打开项目中, config/index.js

在module.exports配置对象的dev属性中增加

proxyTable: {
    '/master':{
        target:"http://domain.com/",
        changeOrigin:true,
        pathRewrite:{
            '^/master':'/master'
        }
    }
}

完整修改如下图:

image.png


说明

'/master' 这个代理配置的名称

target : 后端接口的主机地址

changeOrigin : 是否开启代理 

pathRewrite:{ '^/master1' : '/master2' }  其中 '^/master1'表示以/master1开始的接口,需要代理,并将其改写为/master。


完整示例

如真实后端接口为: http://www.domain.com/realApi/getData/  


  1. 配置

proxyTable: {
    '/api':{
        target:"http://www.domain.com/",
        changeOrigin:true,
        pathRewrite:{
            '^/localApi':'/realApi'
        }
    }
}

2.请求接口URL,注意只写接口名,不要加域

const url =‘/localApi/getData';//不加域,并写localApi

const url = 'http://www.domain.com/realApi/getData/'//错误


或者不修改请求URL:

  1. 配置

proxyTable: {
    '/realApi':{
        target:"http://www.domain.com/",
        changeOrigin:true,
        pathRewrite:{
            '^/realApi':'/realApi'
        }
    }
}


2.请求接口URL,注意只写接口名,不要加域

const url =‘/realApi/getData';


发表评论说说你的看法吧

精品模板蓝瞳原创精品网站模板

^