vue調用api接口解決跨域問題

vue-cli3構建的項目：

　　在vue.config.js的devServer中配置proxy　　　　

devServer:{
    port:8086, // 啟動端口
    open:false,  // 啟動后是否自動打開網頁
    proxy: {
      '/api': {
        target: 'http://s.gecimi.com', //要跨域的域名
        secure:true ,//接受對方是https的接口
        ws: true, // 是否啟用websockets
        changeOrigin: true, //是否允許跨越
        pathRewrite: {
          '^/api': '/'  //將你的地址代理位這個 /api 接下來請求時就使用這個/api來代替你的地址
        },
      }
    }

1、target是要代理的域名

2、使用'/api'代替target里面的地址，組件中調用接口時直接用'/api'代替，例如調用'http://xxx.com/lrc'，直接寫'/api/lrc‘即可

webpack構建的項目，

proxy: {
      '/api': {
        target: 'http://s.gecimi.com', //要跨域的域名
        secure:true ,//接受對方是https的接口
        ws: true, // 是否啟用websockets
        changeOrigin: true, //是否允許跨越
        pathRewrite: {
          '^/api': '/'  //將你的地址代理位這個 /api 接下來請求時就使用這個/api來代替你的地址
        },
      }