在使用vue開發(fā)項(xiàng)目的時(shí)候，總會(huì)遇到跨域問題，可以在打包的時(shí)候使用proxy反向代理解決跨域問題。

vue-cli2配置如下：

找到config文件夾下的index.js

dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target: 'http://moby.xbotech.com',//填寫A真實(shí)的后臺(tái)接口
        changeOrigin: true,//允許跨域
        secure: false,
        pathRewrite: {//重寫請(qǐng)求路徑
          '^/api': ''
        }
      }
},

　　請(qǐng)求路徑

const service = axios.create({
  baseURL: 'api', //process.env.VUE_APP_BASE_API,
  // baseURL: process.env.VUE_APP_BASE_API, //api, 
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 300000 // request timeout
  
})

　　vue-cli3版本以上，需要自己創(chuàng)建vue.config.js文件，在這個(gè)文件中自己配置

module.exports = {
    devServer: {       host: '0.0.0.0', // 允許外部ip訪問
        port: 9080, // 端口
        https: false, // 啟用https
        proxy: {
          '/api': {
            target: 'http://moby.xbotech.com/api/login',
            changeOrigin: true,
            secure: false,
            pathRewrite: {
              '^/api': '/api'
            }
          }
        }
    }
}

　　使用axios發(fā)送請(qǐng)求

aixos.get('/api/list')

　　總結(jié)：無論是那種方式創(chuàng)建的項(xiàng)目，'/api' 為匹配項(xiàng)，target 為被請(qǐng)求的地址，因?yàn)樵?ajax 的 url 中加了前綴 '/api'，而原本的接口是沒有這個(gè)前綴的，所以需要通過 pathRewrite 來重寫地址，將前綴 '/api' 轉(zhuǎn)為 '/'。如果本身的接口地址就有 '/api' 這種通用前綴，就可以把 pathRewrite 刪掉。

轉(zhuǎn)自：https://www.cnblogs.com/zmyxixihaha/p/12786776.html

總結(jié)

以上是生活随笔為你收集整理的vue项目中使用proxy解决跨域的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。