1. 程式人生 > >vue-cli項目本地代理實現跨域請求

vue-cli項目本地代理實現跨域請求

con 跨域 請求 AR url 本地 dex ams gin

  使用 Vue-cli 創建的項目,開發地址是 localhost:8080,需要訪問非本機上的接口http://10.1.0.34:8000/queryRole。不同域名之間的訪問,需要跨域才能正確請求。跨域的方法很多,通常都需要後臺配置,不過 Vue-cli 創建的項目,可以直接利用 Node.js 代理服務器,通過修改vue proxyTable接口實現跨域請求,在vue-cli項目中的config文件夾下的index.js配置文件中,修改前的dev:
dev: {  
    env: require(./dev.env),  
    port: 8080,  
    autoOpenBrowser: 
true, assetsSubDirectory: static, assetsPublicPath: /, proxyTable: {}, cssSourceMap: false }

  只要修改裏面的proxyTable: {}項

proxyTable: {  
    /api: {  //代理地址  
        target: http://10.1.0.34:8000/,  //需要代理的地址  
        changeOrigin: true,  //是否跨域  
        secure: false,    
        pathRewrite: {  
            
^/api: ‘‘ //本身的接口地址沒有 ‘/api‘ 這種通用前綴,所以要rewrite,如果本身有則去掉 } } }

  然後重啟項目npm run dev

  請求數據時URL前加上“/api”就可以跨域請求了

self.$axios.get(/api/queryRole, {params: params})  
    .then((res) => {  
        console.log(res);  
    }).catch((err) => {  
        console.log(err);  
    })

vue-cli項目本地代理實現跨域請求