快捷導(dǎo)航

vue項(xiàng)目proxyTable配置小結(jié)

更新時(shí)間：2023年04月14日 16:21:16 作者：橙可愛

本文主要介紹了vue項(xiàng)目proxyTable配置小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

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

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

總之，proxyTable是一個(gè)非常有用的工具，可以幫助Vue.js應(yīng)用程序開發(fā)人員輕松地解決跨域請(qǐng)求問題，并加快開發(fā)和調(diào)試的速度。
1，瀏覽器的同源策略不允許跨域訪問，所謂同源策略是指協(xié)議、域名、端口相同
2，在使用webpack做構(gòu)建工具的項(xiàng)目中使用proxyTable代理實(shí)現(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，需要設(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)過代理之后就沒了，這樣我們?cè)谂渲么磉@里只需要配置一份就夠了，只是在寫接口地址時(shí)要注意區(qū)分開發(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開發(fā)服務(wù)器。如果請(qǐng)求的URL與proxyTable中的某個(gè)屬性匹配，則該請(qǐng)求將被代理到指定的后端API服務(wù)器，而不是直接向目標(biāo)服務(wù)器發(fā)送請(qǐng)求。代理過程實(shí)際上是在開發(fā)環(huán)境中創(chuàng)建了一個(gè)反向代理服務(wù)器。

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

總之，proxyTable選項(xiàng)的原理是在Webpack開發(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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: