使用http-server代理axios请求

最新推荐文章于 2024-09-13 21:40:16 发布

置顶 strive_or_die

最新推荐文章于 2024-09-13 21:40:16 发布

阅读量4k

点赞数 3

分类专栏： JavaScript Java 文章标签： http-server axios 正向代理

本文链接：https://blog.csdn.net/strive_or_die/article/details/102647737

版权

Java 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

JavaScript

13 篇文章 0 订阅

订阅专栏

使用http-server代理axios请求

开始想简单的学习一下axios相关的使用和API，写了一个简单的html通过引入CDN方式的axios的js，然后通过axios向后端发起请求，出现了跨域，所以想到使用http-server来处理这种前端和后端分离时跨域的问题。

http-server简介

http-server是一个简单的零配置命令行http服务器。它足够强大，足以用于生产用途，但它既简单又易于破解，可用于测试，本地开发和学习。使用场景除了可以用于实现前后端分离外，如果我们有些纯前端的一些html页面想要对外提供访问，http-server也是一种非常方便的工具。

安装http-server

先要确保安装了Node，然后再执行下列的安装命令。

#全局方式安装http-server
npm install http-server -g

配置环境变量

因为在Windows下安装，安装后的路径为C:\Users\[用户名]\AppData\Roaming\npm，将这个目录配置到环境变量path中，那么才可以在CMD中直接使用http-server而无需使用全路径。

基本配置参数

-p or --port ：指定监听的端口

-P or --proxy：指定如果http-server处理不了的请求，将交个代理的地址的服务处理（正向代理）

启动方式

普通的启动方式，不开启代理，那么所有的请求都会由http-server处理。

#直接启动，默认端口为：8080
http-server
#指定监听端口
http-server -p 1234

使用代理的方式启动，开启代理，这是我们需要的。http-server的代理是正向代理。

#代理方式启动
#下面的启动语句，表示：启动http-server监听1234端口，如果处理不了的请求那么就会将请求交给--proxy指定的服务处理。
http-server -p 1234 --proxy http://127.0.0.1:8080

启动http-server

指定http-server -p 1234 --proxy http://127.0.0.1:8080启动http-server，特别注意执行http-server命令要在指定的前端文件所在的目录下执行，这样通过指定的端口才能找到指定的资源文件.例如下图，我测试的html页面的地址是在frontest目录下，CMD切换到指定目录下再执行命令.
在这里插入图片描述

简单的前端html代码

html页面很简单，只是简单的登录框的，通过axios发起请求,测试axios的文件test.html：

<html>
<head>
  <style type="text/css">
     body{ 
	    text-align:center
	 } 
     #loginTableDiv {
		margin:0 auto;
		margin-top:300px;
		border:1px solid #000;
		width:300px;
		height:100px
	 }
	 #spanTips{
		margin-left:2px;
	 }
  </style>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script type="text/javascript">
	function login(){
	  var userNameEl = document.getElementById('userName');
	  var passwordEl = document.getElementById('password');
	  var spanTips = document.getElementById('spanTips');
	  
	  axios.post('/login', {
		userName: userNameEl.value,
		password: passwordEl.value
	  })
	  .then(function (response) {
		console.log(response);
		
		//响应数据
		var data = response.data;
		if(response.status == 200){
		    spanTips.innerHTML = data.msg;
			if(data.code == 0){
			  spanTips.style = "color:green";
			}else{
			  spanTips.style = "color:red";
			}
		}
	  })
	  .catch(function (error) {
		console.log(error);
	  });
	}
  </script>
</head>
<body>
	<div id="loginTableDiv">
	    <span id="spanTips"></span></br>
		用户名：<input type="text" id="userName"/></br>
		密&nbsp;&nbsp;&nbsp;码：<input type="password" id="password"/></br>
		<input type="submit" value="登录" onclick="login()"/>
		<input type="reset" value="清空"/>
	</div>
</body>
</html>

后台的代码

后台主要使用springboot，简单的写了一个/login的API接口用于测试axios：

@Controller
public class LoginController {

    private static Map<String,User> userMap = new HashMap<>();
    static {
        //模拟数据中的数据
        User userA = User.builder().userName("Jack").age(18).password("123456").build();
        User userB = User.builder().userName("John").age(18).password("123456").build();
        userMap.put(userA.getUserName(),userA);
        userMap.put(userB.getUserName(),userB);

    }

    @ResponseBody
    @RequestMapping(value = "/login",method = {RequestMethod.POST})
    public Result login(@RequestBody User user, HttpServletRequest request){
        System.out.println("用户名：" + user.getUserName());
        System.out.println("密码：" + user.getPassword());
        if(userMap.containsKey(user.getUserName())){
            User userInDB = userMap.get(user.getUserName());
            if (userInDB.getPassword() != null && userInDB.getPassword().equals(user.getPassword())){
                return Result.builder().code(0).msg("成功").build();
            }else{
                return Result.builder().code(-1).msg("密码错误").build();
            }
        }else{
            return Result.builder().code(-1).msg("用户不存在").build();
        }

    }
}