美文网首页
vue 项目跨域

vue 项目跨域

作者: 不染事非 | 来源:发表于2019-04-30 14:39 被阅读0次
    • 使用http-proxy-middleware 代理解决(项目使用vue-cli脚手架搭建)
      例如请求的`url:“http://aa.com/demo.json
    1.1、打开config/index.js,在proxyTable中添写如下代码:
    proxyTable: { 
      '/api': {  //使用"/api"来代替"http://aa.com" 
        target: 'http://aa.com', //源地址 
        changeOrigin: true, //改变源 
        secure:false // 是否使用https
        pathRewrite: { 
          '^/api': '/api' //路径重写 
          } 
      } 
    }
    
    1.2 、使用axios请求数据时直接使用“/api”
    getData () { 
     axios.get('/api/demo.json', function (res) { 
       console.log(res) 
    })
    

    以上配置只是在开发环境(dev)中解决跨域。要解决生产环境的跨域问题,则在config/dev.env.jsconfig/prod.env.js里也就是开发/生产环境下分别配置一下请求的地址API_HOST,开发环境中我们用上面配置的代理地址api,生产环境下用正常的接口地址

    module.exports = merge(prodEnv, {
        NODE_ENV: '"development"',
        API_HOST:"/api/"
    })
    
    'use strict'
    module.exports = {
        NODE_ENV: '"production"',
        API_HOST:"http://aa.com"
    }
    

    相关文章

      网友评论

          本文标题:vue 项目跨域

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