前言

proxyTable是一個用于Vue.js應用程序的配置選項，它允許您在開發(fā)過程中代理后端API請求。這一功能的作用是解決由于瀏覽器的同源策略所限制而導致的跨域請求問題。當前端應用程序部署在一個Web服務器上并向不同的后端API發(fā)送請求時，這個功能就變得尤為重要。

在Vue.js應用程序中使用proxyTable的主要優(yōu)點是能夠簡化配置，方便地進行本地開發(fā)和調(diào)試。在開發(fā)過程中，可以將所有的API請求都代理到本地的開發(fā)環(huán)境中，從而避免了跨域請求的問題，并且可以通過簡單地更改proxyTable配置來切換后端API的地址。此外，還可以通過proxyTable輕松地模擬網(wǎng)絡延遲和錯誤，以測試應用程序處理這些情況的能力。

總之，proxyTable是一個非常有用的工具，可以幫助Vue.js應用程序開發(fā)人員輕松地解決跨域請求問題，并加快開發(fā)和調(diào)試的速度。
1，瀏覽器的同源策略不允許跨域訪問，所謂同源策略是指協(xié)議、域名、端口相同
2，在使用webpack做構建工具的項目中使用proxyTable代理實現(xiàn)跨域是一種比較方便的選擇。

如何配置proxyTable

找到根目錄下config文件夾下的index.js文件。由于我們是在開發(fā)環(huán)境下使用，配置在dev里面：

 dev: {
    env: require('./dev.env'),
    port: 8070,
    autoOpenBrowser: true,
    assetsSubDirectory: './',
    assetsPublicPath: '/',
    // quiet: true, // 如果使用webpack-dev-server，需要設為true，禁止顯示devServer的console信息
    proxyTable: {
      '/base': {
        target: 'https://xxxxx/',
        changeOrigin: true,// 如果接口跨域，需要進行這個參數(shù)配置
        pathRewrite: {
          '^/base': '/'   // 重寫接口
        }
      },
    },

和pre環(huán)境配置/base相匹配
上面這段代碼的效果就是將以/base字段起始的本地接口請求代理到了https://xxxxx/這一域名下：

//先人為給接口地址前面加上一個自定義的項目名
const VUE_APP_CALL='"/base/api/app/tcloud-scrm-call"'
項目名base是我們?nèi)藶榧由先サ?，?jīng)過代理之后就沒了，這樣我們在配置代理這里只需要配置一份就夠了，只是在寫接口地址時要注意區(qū)分開發(fā)環(huán)境和線上環(huán)境就可以了

在這個文件下配置環(huán)境地址域名server

關于proxyTable的原理

在Vue.js應用程序中，當proxyTable選項被配置時，請求將首先被發(fā)送到Webpack開發(fā)服務器。如果請求的URL與proxyTable中的某個屬性匹配，則該請求將被代理到指定的后端API服務器，而不是直接向目標服務器發(fā)送請求。代理過程實際上是在開發(fā)環(huán)境中創(chuàng)建了一個反向代理服務器。

反向代理服務器接收到請求之后，將對其進行一些處理，并將其轉(zhuǎn)發(fā)到后端API服務器。這樣做的好處是我們可以通過反向代理服務器來控制請求的流量、限制跨域請求并提高安全性。同時，通過配置proxyTable選項，我們還可以在開發(fā)和生產(chǎn)環(huán)境中使用相同的API地址，從而減少出錯的可能性。

總之，proxyTable選項的原理是在Webpack開發(fā)服務器和反向代理服務器的幫助下，將請求轉(zhuǎn)發(fā)到后端API服務器，以實現(xiàn)跨域請求的代理和控制。

到此這篇關于vue項目proxyTable配置小結(jié)的文章就介紹到這了,更多相關vue proxyTable配置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論