【前端】npm前端代理和转发
时间:2019-10-26
本文章向大家介绍【前端】npm前端代理和转发,主要包括【前端】npm前端代理和转发使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
npm前端代理和转发:
在后端服务开启的状态下,npm run build (生产环境)将前端打包成静态文件,和后端服务放在一起,即可直接调用,例如后端开启8888端口,在localhost:8888直接访问前端网页。
在后端服务开启的状态下,npm run sevre(开发环境)前端文件(js、html、vue等)仍在前端的域中,不被允许跨域交互(同源策略),如果要和后端数据交互,则需要中间端口进行代理和转发。
fetch.js 文件中写好前端的URL
let service = axios.create({ // 已经是一个promise 了 baseURL: '/', timeout: 30000 });
无论有无代理,访问时的URL会写为 /
在vue.config.js文件中,设置代理方式和无代理时的访问URL
module.exports = { // 修改的配置 // 将baseUrl: '/api',改为baseUrl: '/', baseUrl: '/static', devServer: { proxy: { '/': { target: 'http://localhost:8888', changeOrigin: true, ws: true, // pathRewrite: { // '^/api': '' // } } } } }
无代理访问的URL:baseUrl
devServer:开发环境下的代理。当前端请求发送到中间端口时,请求将识别到包含 / 的url,并把请求转发到8888端口。
但是当后端开启多个服务时(8888和8889),前端代理就需要指明转发到不同的服务端口,那么代理就需要区分不同的URL。
实际上,所访问到的不同的url是在cgi部分指定的,例如定义了api和api2,分别要访问两个服务,则在devServer写为:
devServer: { proxy: { '/api': { target: 'http://localhost:8888', changeOrigin: true, ws: true, pathRewrite: { '^/api': '' } }, '/api2': { target: 'http://localhost:8889', changeOrigin: true, ws: true, pathRewrite: { '^/api2': '' } } } }
原文地址:https://www.cnblogs.com/AHappyBird/p/11743538.html
- velocity分页模板
- js基础-表单验证和提交
- No compiler is provided in this environment. Perhaps you are running on a JRE rather than a JDK?
- oracle创建用户
- oracle创建表相关
- spring学习遇到的问题汇总
- Java XML解析工具 dom4j介绍及使用实例
- redis学习教程之一基本命令
- 在java中使用redis
- springmvc学习笔记--json--返回json的日期格式问题
- springmvc学习笔记--mybatis--使用插件自动生成实体和mapper
- velocity的一些用法
- String.split()用法以及特殊分隔符注意,ps:|
- Mybatis在idea中错误:Invalid bound statement (not found)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- CTF-摩斯电码解密
- Lampiao靶机渗透
- 如何绕过堡垒机远程登录
- Android | okhttp细枝篇
- valgrind测试报告分析
- 深度学习Pytorch检测实战 - Notes - 第5章 单阶多层检测器:SSD
- Java+selnium 智能等待,try catch方法智能定位需添加等待的元素
- Python中的命名空间和作用域(2)
- C/C++可以用正则表达式吗?
- typescript实战总结之实现一个互联网黑白墙
- 文件上传漏洞演示(一句话木马文件 + 蚁剑)
- [Bazel]构建Golang项目
- 2020--IDEA破解失败后无法打开(mac/win)【已解决】
- CPU:别再拿我当搬砖工!
- 7类 登录/注册 安全漏洞