我們?cè)谑褂胿ue請(qǐng)求接口時(shí)，經(jīng)常會(huì)遇到跨域問(wèn)題

前端在vue中訪(fǎng)問(wèn)報(bào)錯(cuò)

跨域報(bào)錯(cuò)

但是后端已經(jīng)設(shè)置了跨域

后端設(shè)置跨域

這時(shí)候就需要配置代理（proxy）

在根目錄下創(chuàng)建vue.config.js

創(chuàng)建vue.config.js

代碼如下

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:4000/',  // 此處為接口地址
        changeOrigin: true,   // 是否允許跨域
        pathRewrite: {  // 重寫(xiě)路徑 目的是把/api開(kāi)始的接口重寫(xiě) （如/api/users 改成/users）
          '^/api': '/'
        }
      }
    }
  }
}

注：如果不設(shè)置pathRewrite，上面請(qǐng)求的接口地址則為http://localhost:4000/api/xxx，xxx為接口地址（如users）

這個(gè)時(shí)候你就可以去請(qǐng)求后端接口了

請(qǐng)求后端接口

注：端口前應(yīng)加 /api (也就是在vue.config.js中proxy下配置的字段)

這個(gè)時(shí)候就可以請(qǐng)求到數(shù)據(jù)了

請(qǐng)求接口

你學(xué)費(fèi)了嗎

給樓主點(diǎn)個(gè)關(guān)注吧，不定期分享干貨