像我們本地的vue項目運行起來，訪問的地址一般是localhost，這個時候請求后臺的接口，端口號也不一致，肯定就會存在跨域問題，所以我們要是想正常訪問接口的話，就需要解決掉跨域問題。

本文我們是在vue.config.js配置proxy代理解決跨越：如果沒有vue.config.js，就直接在項目根目錄下建一個即可。

const path = require('path')
const resolve = (dir) => path.join(__dirname, dir)
module.exports = {
  publicPath: './', // 打包路徑，使用相對路徑生成的dist文件夾下的index可以打開
  outputDir: 'dist', // 輸出文件目錄
  productionSourceMap: false, // 取消生成map文件
  lintOnSave: false, // 配置關閉eslint  (代碼會有紅色熱浪提示錯 但不影響代碼運行)
  // webpack-dev-server 相關配置
  devServer: {
    open: true, // 自動打開瀏覽器
    host: '0.0.0.0',
    /* 設置為0.0.0.0則所有的地址均能訪問 */
    port: 8080, // 端口號
    https: false, // 是否使用https協(xié)議
    hotOnly: false, // 是否開啟熱更新
    // proxy: null // 設置代理
    disableHostCheck: true, // 開啟可以用自己的域名

    //【【【【【【【【【【【【【【【【【【【【【注意修改和配置代理后，一定要重啟項目 否則無效或404】】】】】】】】】】】】】】】】】
    //【【【【【【【【【【【【【【【【【【【【【注意修改和配置代理后，一定要重啟項目 否則無效或404】】】】】】】】】】】】】】】】】
    proxy: { //【【【【【【【【【【【【【【【 注意修改和配置代理后，一定要重啟項目 否則無效或404】】】】】】】】】】】】】】】】】
      // 配置多個代理
      '/chc-shop': {
        target: 'https://www.bilibili.cn', //這里的是.cn還是.com 只會影響你本地啟動項目時候會調用哪個數(shù)據(jù)庫的數(shù)據(jù)，而不會影響測試和線上環(huán)境調用對應的接口的。（一般都是本地調用.cn；等本地需要調試線上bug時候，改成.com重啟項目看線上bug）
        changeOrigin: true, //是否跨域
        secure: false, //如果是https請求 需要設置為true
        logLevel: 'debug',
        //ws: true,//是否要代理 websocket
      },
      
      // 此處若使用 "/api1" 類似命名可能會導致請求時只截取api部分接口出現(xiàn)404錯誤，因此命名時盡量避免此類命名方式。
      // 既命名不要相似 有/api 就不要再出現(xiàn)/api2
      
      '/myapi': {
        target: 'https://www.bilibili.cn', //接口域名
        changeOrigin: true, //是否跨域
        secure: false, //如果是https請求 需要設置為true
        logLevel: 'debug',
        //ws: true,//是否要代理 websocket
        pathRewrite: { // 路徑重寫--意思就是遇到路徑有 /myapi 的，就重寫成 / 了。具體是重新寫成 / 還是 /myapi看你自己的路徑。
          '^/myapi': '/' //（如果你的路徑沒有公共部分 那代理就這么寫 vue頁面請求的地址前需要自己拼接上 /myapi/后端接口 ）
          // '^/myapi': '/myapi'    //（好比你的很多路徑都是有公共部分 例如 /myapi/xx/xxx類型的，那代理就需要這么寫或者直接不寫pathRewrite這部分）
        }
      },

    },
  },
  chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('src'))
      .set('common', resolve('src/common'))
      .set('utils', resolve('src/utils'))
  }
}

一、 重點注意事項：

1.配置了proxy代理，修改內容后：一定要重啟項目 一定要重啟項目 一定要重啟項目 一定要重啟項目 一定要重啟項目，否則無效或者報錯404.還有就是不要出現(xiàn)’/api’ 和’/api2’這樣相似的，這樣只會生效一個?。?！

2.proxy可以配置多個代理。
2.1例如:我的接口很多都是/chc-shop/a1/xxx /chc-shop/a2/xxx這樣的，也就是有公共部分/chc-shop。 那么就可以配置成如下代理

    //【【【【【【【【【【【【【【【 注意修改和配置代理后，一定要重啟項目 否則無效或404】】】】】】】】】】】】】】】】】
    proxy: { 
      // 配置公共代理
      '/chc-shop': {
        target: 'https://www.zhbbroker.cn', //這里的是.cn還是.com 只會影響你本地啟動項目時候會調用哪個數(shù)據(jù)庫的數(shù)據(jù)，而不會影響測試和線上環(huán)境調用對應的接口的。（一般都是本地調用.cn；等本地需要調試線上bug時候，改成.com重啟項目看線上bug）
        changeOrigin: true, //是否跨域
        secure: false, //如果是https請求 需要設置為true
        logLevel: 'debug',
        //ws: true,//是否要代理 websocket
      },
    },

同時vue頁面的請求地址就是這樣：

2.2例如：如果接口沒有公共部分，那么就需要寫pathRewrite，同時將代理的地址重寫為’/'；
pathRewrite的意思路徑重寫。意思就是遇到路徑有 /myapi 的，就重寫成 / 了。具體是重新寫成 / 還是 /myapi看你自己的路徑。
好比后端的請求地址是 /php2/mobile/login_verify_code.php，那么我需要單獨寫一個/php2去代理，

目標地址為：https://www.bilibili.com/php2/mobile/login_verify_code.php
代碼中請求的地址為: /php2/mobile/login_verify_code.php
本地發(fā)送請求的地址為：http://localhost:8080/php2/mobile/login_verify_code.php
線上被proxy替換為實際請求地址: https://www.bilibili.com/php2/mobile/login_verify_code.php

	//【【【【【【【【【【【【【【【 注意修改和配置代理后，一定要重啟項目 否則無效或404】】】】】】】】】】】】】】】】】
    proxy: { 
      '/php2': {
        target: 'https://www.zhbbroker.cn', //接口域名
        changeOrigin: true, //是否跨域
        secure: false, //如果是https請求 需要設置為true
        logLevel: 'debug',
        //ws: true,//是否要代理 websocket
   
      },

    },

同時vue請求頁面

三、總結：
配置代理一定要重啟項目，否則會無效或者404
是否寫pathRewrite，取決與后端給的接口是不是有公共的url部分，有的話可以不寫；無的話自己配置個/myapi拼接在后端的url上，同時要將pathRewrite重寫為 /

另一個參考文章來源地址http://www.zghlxwxcb.cn/news/detail-401390.html

到了這里，關于vue.config.js配置proxy代理解決跨越；proxy代理報404；的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！