文章目錄

• • • • 0.反向代理是什么?
      • • 1、正向代理(forward proxy)
        • 2、反向代理(Reverse proxy)
      • 1.為什么要配置反向代理?
      • 2.如何實現vue中配置反向代理?
      • • 2.1.安裝和引入axios庫
        • 2.2. 配置文件vue.config.js
        • 2.3.使用axios

0.反向代理是什么?

1、正向代理(forward proxy)

客戶端想要訪問一個服務器，但是它可能無法直接訪問這臺服務器， 這時候這可找一臺可以訪問目標服務器的另外一臺服務器， 而這臺服務器就被當做是代理人的角色 ，稱之為代理服務器， 于是客戶端把請求發給代理服務器， 由代理服務器獲得目標服務器的數據并返回給客戶端。 客戶端是清楚目標服務器的地址的，而目標服務器是不清楚來自客戶端， 它只知道來自哪個代理服務器，所以正向代理可以屏蔽或隱藏客戶端的信息。

2、反向代理(Reverse proxy)

從上面的正向代理，你會大概知道代理服務器是為客戶端作代理人， 它是站在客戶端這邊的。其實反向代理就是代理服務器為服務器作代理人，站在服務器這邊， 它就是對外屏蔽了服務器的信息，常用的場景就是多臺服務器分布式部署， 像一些大的網站，由于訪問人數很多，就需要多臺服務器來解決人數多的問題， 這時這些服務器就由一個反向代理服務器來代理， 客戶端發來請求，先由反向代理服務器， 然后按一定的規則分發到明確的服務器， 而客戶端不知道是哪臺服務器。常常用nginx來作反向代理。

1.為什么要配置反向代理?

前后端分離的網站下,不同源的網站不允許發送ajax請求
解決辦法：

• jsonp跨域:原理不用ajax，使用script標簽，script標簽不受同源策略的影響，缺點是script只能是get請求

• 反向代理原理:避免跨域 服務器給服務器發請求

2.如何實現vue中配置反向代理?

步驟和示例

2.1.安裝和引入axios庫

• 安裝命令: npm install axios,node-modules文件夾中有axios文件夾即成功安裝
• 在vue項目App.vue的script標簽中引入:import axios from "axios"

2.2. 配置文件vue.config.js

在項目中的位置:

vue-config.js
代碼復制

module.exports = {devServer: {proxy: {'/ajax': {target: 'http://m.maoyan.com',changeOrigin: true}}} }

2.3.使用axios

發送get請求:
App.vue

export default {mounted(){axios.get("/ajax/movieOnInfoList?token=").then(res=>{console.log(res.data);})} };

相關博文:vue設置反向代理

總結

以上是生活随笔為你收集整理的2021-11-03 vue笔记:反向代理介绍和使用场景,基于 vue-cli 的反向代理设置及 axios 获取 json 数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。