vue 开发环境前端服务器代理,proxyTable使用

以下是我转发的,博主正文在此:https://www.cnblogs.com/wasbg/p/12659610.html
我们在使用 vue-cli 工具生成 vue 项目时

vue init webpack my-project-vue
在生成的项目结构里,会有一个 index.js 文件.
在这里插入图片描述
在这个 index.js 文件里,会有一个 proxyTable 的空节点.
在这里插入图片描述
理解这个节点的作用需要有两个前置知识

前端跨域
利用代理服务器进行跨域.
proxyTable
proxyTable 是 vue-cli 脚手架在开发模式下,为我们提供的一个跨域的代理中转服务器服务.基于 (http-proxy-middleware插件).

为什么要有 proxyTable?

有时候在开发期间,我们请求的后台接口(a.b.c/data.json)不和vue(localhost:8080)在同一个域名,后台也并未提供cors跨域服务.
在这里插入图片描述
正常情况下,我们无法通过ajax向后台请求到数据.因为跨域了.浏览器的同源策略,截获了这次数据的返回,没有给vue.

解决办法有两个:

服务器开启 cors (最简单,也是最方便的)
用代理服务器中转一下(vue请求的还是自己的后台,让后台去请求真是数据的后台,然后再将数据返回给vue)
访问一个不支持跨域的后台服务数据接口
这里,用node.js写一个非常简单http服务…端口号是54321.

这个服务就是返回一个json数据.

但并没有开启跨域功能.

const http = require('http')
const fs = require('fs')

http.createServer
  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值