代理到底是怎么一回事

前言

在我们做项目的时候，本地运行发现前端请求的地址与后端接口提供的地址并不一致，这时候就有人说，你做个代理就可以解决这个问题了。那么代理是什么，是怎么解决地址不一样还能请求到后端呢？

同源策略

当我们请求的地址与目标服务器的地址不一样会请求失败，是因为浏览器对 javascript 实施的安全限制，不允许非同源的 URL 之间进行资源的交互，当不同源的时候会把当前请求拦截掉，表示该请求为跨域请求，那么怎么判断为不同源呢？

跨域

当协议、域名/IP、端口只要有一个不一样就为跨域，例如 http://localhost:3000/ ， http 部分为协议，localhost 部位为域名或者 IP 地址，3000 为端口。

代理

那么为了解决跨域问题，可以使用代理来解决这个问题。当我们所发送的请求都会由代理服务器代为转发，而代理服务器的地址与当前使用的地址一致，便解决了跨域问题，可以请求到目标服务器拿到数据。

而代理也有正反之分

正向代理是为客户端服务的，客户端可以根据正向代理访问到它本身无法访问到的服务器资源。

在 vue 的项目中，我们可以这样进行代理设置：在项目根目录下有 vue.config.js 这么一个文件，在里面可以进行一些项目的配置，这里去进行代理，去到 proxy 进行配置。

js 复制代码

proxy: {
'/api': {
    target: 'http://192.168.0.111',
    changeOrigin: true,
    secure: false,
    pathRewrite: {
        '^/api': ''
    }
  },
}

在 vue.config.js 文件中配置的代理只是解决了开发环境中的跨域，到时候上线了如果还是要进行跨域请求的话，就可以使用 nginx 进行反向代理

反向代理是指以代理服务器来接收客户端上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器返回的内容返回给请求连接的客户端。

其实就是为服务器服务的，可以帮助服务器接收客户端的请求，帮助服务器做请求转发，负载均衡、防范攻击、缓存等。

防范攻击，为了服务器的安全，不允许用户直接请求解除到真实服务器，任何的访问都要先到代理服务器，由代理服务器进行验证、过滤白名单等操作，符合条件的才会转发到真实服务器
负载均衡，当一个网站访问的人数过多的时候，服务器承受的请求压力会很大，这时候需要添加多个服务器来承受这些请求，然后在这些服务器前面添加代理服务器，做负载均衡，用户请求先到代理服务器，让它来决定请求转发给对应的服务器
缓存，当反复跳转重复请求同一个内容的时候，内容是一样的，但是每次都要请求到服务器上，会占用服务器资源，这时候可以让代理服务器承担这工作，将一些重复、常用的内容缓起来，当请求到这些资源时，就可以直接返回给用户，不必转发给服务器，减轻服务器的压力

nginx 是一个高性能的HTTP和反向代理服务器，它是整个项目的代理，不同于 vue 中的 proxy 只是一个接口的代理。

首先需要去下载 nginx

js 复制代码

// nginx 基本配置结构
events{
	
}
http{
	server{
		location path
		{
			...
		}
		location path
		{
			...
		}
	}
	server{
		...
	}
}

一个 http 可以配置多个 server

js 复制代码

server{ 
    listen 80; 
    server_name pc.server.com; 
    location /{ 
        proxy_pass hd.server.com; 
    } 
}

当访问到 pc.server.com 就会转发给 hd.server.com 去处理

代理可以让我们对目标的访问控制，并且可以在其中增加额外的功能，在解决跨域问题的时候就可以使用代理，去控制请求的访问，并且代理分为正向代理和反向代理，正向代理为代理客户端，反向代理为代理服务器。代理能来帮助我们更好更快的完成项目的开发和部署。