前言

proxyTable是一個(gè)用于Vue.js應(yīng)用程序的配置選項(xiàng)，它允許您在開(kāi)發(fā)過(guò)程中代理后端API請(qǐng)求。這一功能的作用是解決由于瀏覽器的同源策略所限制而導(dǎo)致的跨域請(qǐng)求問(wèn)題。當(dāng)前端應(yīng)用程序部署在一個(gè)Web服務(wù)器上并向不同的后端API發(fā)送請(qǐng)求時(shí)，這個(gè)功能就變得尤為重要。

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

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

如何配置proxyTable

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

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

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

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

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

關(guān)于proxyTable的原理

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

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

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

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

最新評(píng)論