2023年8月1日发(作者：)

关于able是⼲什么的？以及如何配置？我们在使⽤

vue-cli ⼯具⽣成

vue 项⽬时vue init webpack my-project-vue在⽣成的项⽬结构⾥,会有⼀个

⽂件.在这个

⽂件⾥,会有⼀个

proxyTable 的空节点.理解这个节点的作⽤需要有两个前置知识前端跨域利⽤代理服务器进⾏跨域.关于这个问题,我在上⼀篇[CORS & JSONP 学习笔记⼀]⽂章中已经有了⼤致的说明.如果忘记了,可以回头去看看复习⼀下.proxyTableproxyTable 是

vue-cli 脚⼿架在开发模式下,为我们提供的⼀个跨域的代理中转服务器服务.基于 (http-proxy-middleware插件).为什么要有

proxyTable?有时候在开发期间,我们请求的后台接⼝(a.b.c/)不和vue(localhost:8080)在同⼀个域名,后台也并未提供cors跨域服务.正常情况下,我们⽆法通过ajax向后台请求到数据.因为跨域了.浏览器的同源策略,截获了这次数据的返回,没有给vue.解决办法有两个:服务器开启

cors (最简单,也是最⽅便的)⽤代理服务器中转⼀下(vue请求的还是⾃⼰的后台,让后台去请求真是数据的后台,然后再将数据返回给vue)访问⼀个不⽀持跨域的后台服务数据接⼝这⾥,⽤写⼀个⾮常简单http服务..端⼝号是54321.这个服务就是返回⼀个json数据.但并没有开启跨域功能.const http = require('http')const fs = require('fs')Server((request, response) => {

()

// 对于所有请求,都返回这个json数据. le('./', 'utf-8', (err, data) => {

(data) })}).listen(54321, () => {

(`server is running at 54321`)})测试⼀下:然后使⽤

vue-cli 创建⼀个

vue 项⽬并在

⾥键⼊以下代码created() { ('localhost:54321/') .then(response => { = st (st) }) .catch(error => { (error) }) },

不出意外,肯定会提⽰跨域了.(vue:8080) & (:54321)假设现在这个后台是别⼈写的,或者是⼀个压根你就不认识的⼈或公司写的.你⽆法让他们去后台追加

cors 来进⾏跨域⽀持.那就只剩下另外⼀个办法了.配置

proxyTable配置 proxyTable 来进⾏跨域proxyTable 跨域的基本原理是:在开发模式下,webpack 会为我们提供⼀个http代理服务器.我们请求接⼝的时候,实际上是请求的webpack提供的这个http代理服务器.在由这个代理服务器请求真是的数据服务器.最后数据经由webpack代理服务器,最后转交给我们的vue程序.为什么加个代理服务器就可以了?因为代理服务器不是浏览器,它没有同源策略的限制.在了解到了基本原理之后,就可以看看

proxyTable 这个节点的⼀些配置属性了.proxyTable: { // 这⾥配置 '/api' 就等价于 target , 你在链接⾥访问 /api === localhost:54321 '/api': { target: 'localhost:54321/', // 真是服务器的接⼝地址 // localhost:54321/, secure: true, // 如果是 https ,需要开启这个选项 changeOrigin: true, // 是否是跨域请求?肯定是啊,不跨域就没有必要配置这个proxyTable了. pathRewrite: { // 这⾥是追加链接,⽐如真是接⼝⾥包含了 /api,就需要这样配置. '/^api': 'api/',

// 等价于

// step 1 /api = localhost:54321/ // step 2 /^api = /api + api == localhost:54321/api } } },关于

pathRewrite 节点说明:那pathRewrite是⽤来⼲嘛的呢，这⾥的作⽤，相当于是替代/api，如果接⼝中是没有api的，那就直接置空，如果接⼝中有api，那就得写成{^/api:/api}，可以理解为⼀个重定向或者重新赋值的功能。总结:proxyTable 就是webpack在开发环境给我们提供的⼀个代理服务器,(使⽤的是 http-proxy-middleware)⽬的是为了在服务器不⽅便开启跨域功能的时候,我们也能⽅便的在开发阶段发送ajax跨域请求.当了真实发布环境,这个玩意就不起作⽤了.除⾮⾃⼰配置⼀个代理服务器,或者让后台开启

cors[码云code]

2023年8月1日发(作者：)

关于able是⼲什么的？以及如何配置？我们在使⽤

vue-cli ⼯具⽣成

vue 项⽬时vue init webpack my-project-vue在⽣成的项⽬结构⾥,会有⼀个

⽂件.在这个

⽂件⾥,会有⼀个

proxyTable 的空节点.理解这个节点的作⽤需要有两个前置知识前端跨域利⽤代理服务器进⾏跨域.关于这个问题,我在上⼀篇[CORS & JSONP 学习笔记⼀]⽂章中已经有了⼤致的说明.如果忘记了,可以回头去看看复习⼀下.proxyTableproxyTable 是

vue-cli 脚⼿架在开发模式下,为我们提供的⼀个跨域的代理中转服务器服务.基于 (http-proxy-middleware插件).为什么要有

proxyTable?有时候在开发期间,我们请求的后台接⼝(a.b.c/)不和vue(localhost:8080)在同⼀个域名,后台也并未提供cors跨域服务.正常情况下,我们⽆法通过ajax向后台请求到数据.因为跨域了.浏览器的同源策略,截获了这次数据的返回,没有给vue.解决办法有两个:服务器开启

cors (最简单,也是最⽅便的)⽤代理服务器中转⼀下(vue请求的还是⾃⼰的后台,让后台去请求真是数据的后台,然后再将数据返回给vue)访问⼀个不⽀持跨域的后台服务数据接⼝这⾥,⽤写⼀个⾮常简单http服务..端⼝号是54321.这个服务就是返回⼀个json数据.但并没有开启跨域功能.const http = require('http')const fs = require('fs')Server((request, response) => {

()

// 对于所有请求,都返回这个json数据. le('./', 'utf-8', (err, data) => {

(data) })}).listen(54321, () => {

(`server is running at 54321`)})测试⼀下:然后使⽤

vue-cli 创建⼀个

vue 项⽬并在

⾥键⼊以下代码created() { ('localhost:54321/') .then(response => { = st (st) }) .catch(error => { (error) }) },

不出意外,肯定会提⽰跨域了.(vue:8080) & (:54321)假设现在这个后台是别⼈写的,或者是⼀个压根你就不认识的⼈或公司写的.你⽆法让他们去后台追加

cors 来进⾏跨域⽀持.那就只剩下另外⼀个办法了.配置

proxyTable配置 proxyTable 来进⾏跨域proxyTable 跨域的基本原理是:在开发模式下,webpack 会为我们提供⼀个http代理服务器.我们请求接⼝的时候,实际上是请求的webpack提供的这个http代理服务器.在由这个代理服务器请求真是的数据服务器.最后数据经由webpack代理服务器,最后转交给我们的vue程序.为什么加个代理服务器就可以了?因为代理服务器不是浏览器,它没有同源策略的限制.在了解到了基本原理之后,就可以看看

proxyTable 这个节点的⼀些配置属性了.proxyTable: { // 这⾥配置 '/api' 就等价于 target , 你在链接⾥访问 /api === localhost:54321 '/api': { target: 'localhost:54321/', // 真是服务器的接⼝地址 // localhost:54321/, secure: true, // 如果是 https ,需要开启这个选项 changeOrigin: true, // 是否是跨域请求?肯定是啊,不跨域就没有必要配置这个proxyTable了. pathRewrite: { // 这⾥是追加链接,⽐如真是接⼝⾥包含了 /api,就需要这样配置. '/^api': 'api/',

// 等价于

// step 1 /api = localhost:54321/ // step 2 /^api = /api + api == localhost:54321/api } } },关于

pathRewrite 节点说明:那pathRewrite是⽤来⼲嘛的呢，这⾥的作⽤，相当于是替代/api，如果接⼝中是没有api的，那就直接置空，如果接⼝中有api，那就得写成{^/api:/api}，可以理解为⼀个重定向或者重新赋值的功能。总结:proxyTable 就是webpack在开发环境给我们提供的⼀个代理服务器,(使⽤的是 http-proxy-middleware)⽬的是为了在服务器不⽅便开启跨域功能的时候,我们也能⽅便的在开发阶段发送ajax跨域请求.当了真实发布环境,这个玩意就不起作⽤了.除⾮⾃⼰配置⼀个代理服务器,或者让后台开启

cors[码云code]