关于vue配置代理(nginx)的一些学习记录
作者:mmseoamin日期:2023-12-14

1、为什么会跨域?

首先要了解一下什么是同源策略,同源策略是一种安全策略,它约束了浏览器在不同源(域名、端口和协议)之间进行交互的行为。同源策略要求网页资源(如脚本、样式表和字体等)只能与同一域名、端口和协议下的资源进行交互。

http://www.baidu.com:8080

协议指:    http

域名指:    www.baidu.com

端口指:    8080

域名、端口和协议有一个不一样的时候请求资源,就是跨域。

跨域请求的限制是基于安全考虑的,因为跨域请求可能导致用户的敏感信息泄露或被恶意利用。但是,可以通过在服务器端设置合适的跨域响应头来允许特定的跨域请求。

2、怎么解决跨域?

常见的解决跨域请求的方式有:JSONP、CORS、代理服务器等。

①JSONP(JSON with Padding)

JSONP(JSON with Padding)是一种绕过浏览器同源策略的跨域请求技术。它利用了Script标签加载外部资源时不受同源策略限制的特性。

JSONP的缺点是只支持GET请求,不支持POST等其他类型的请求。同时,由于安全性较低,容易受到XSS攻击,在现代Web开发中,更常用和推荐的跨域解决方案是CORS(跨域资源共享)。

②CORS(跨域资源共享)

CORS通过在服务器端设置特定的HTTP响应头来允许跨域请求。

当浏览器发起跨域请求时,服务器可以通过设置响应头中的"Access-Control-Allow-Origin"字段来指定允许访问资源的域名。如果服务器希望允许所有域名进行访问,可以设置该字段的值为"*"。此外,还可以设置其他的CORS相关响应头,如"Access-Control-Allow-Methods"指定允许的HTTP方法,"Access-Control-Allow-Headers"指定允许的请求头,等等。

通过使用CORS,服务器可以控制允许的跨域访问范围,并提供更加精细的跨域请求控制。与JSONP相比,CORS支持各种类型的HTTP请求(GET、POST、PUT、DELETE等),更加灵活。

在前端开发中,使用CORS时,浏览器会在发送请求前发送一个预检请求(Preflight Request),用来检查服务器是否允许该跨域请求。服务器在收到预检请求后,可以进行相应的验证和处理,然后给出合适的响应。

③代理服务器(Proxy Server)

是一种位于客户端和目标服务器之间的中间服务器。它充当客户端和服务器之间的中转,通过代理服务器来请求目标服务器上的资源。代理服务器可以提供一些额外的功能,如增强安全性、缓存数据、过滤内容等。

代理服务器有多种类型,常见的包括:

1、正向代理(Forward Proxy):客户端通过正向代理转发网络请求,常用于绕过网络限制、保护隐私和增强安全性等目的。

2、反向代理(Reverse Proxy):客户端请求的流量被反向代理接收,并将请求转发到多个目标服务器上,通常用于负载均衡、缓存、安全策略等。

代理服务器的使用可以带来一些好处,如:

缓存:代理服务器可以缓存经常访问的资源,提高访问速度和减轻服务器负载。

安全性:代理服务器可以增强网络安全,过滤恶意内容、防止攻击和隐藏真实IP地址等。

匿名性:通过正向代理,客户端的真实IP地址得以隐藏,提高用户的匿名性和隐私保护。

负载均衡:反向代理服务器通常用于负载均衡,将客户端请求分发到多个后端服务器上,提高整体性能和可用性。

3、nginx是什么?如何使用nginx进行代理

nginx是一款高性能的开源 Web 服务器和反向代理服务器。它具有轻量级、高并发处理能力和占用资源少的特点,因此被广泛用于构建可扩展的 Web 应用和服务。

使用nginx进行代理,要先下载和配置nginx.conf文件,启动nginx进行代理

①nginx常用命令
//操作nginx首先要进入到nginx所属的文件夹下面
//开启服务:
start nginx
直接点击Nginx目录下的nginx.exe 
//停止服务:nginx停止命令stop与quit参数的区别在于stop是快速停止nginx,可能并不保存相关信息,quit是完整有序的停止nginx  ,并保存相关信息。nginx启动与停止命令的效果都可以通过Windows任务管理器中的进程选项卡观察。
nginx -s stop
nginx -s quit
//其他命令重启、关闭nginx
ps -ef | grep nginx
//从容停止Nginx
kill -QUIT 主进程号
//快速停止Nginx
kill -TERM 主进程号
//强制停止Nginx
pkill -9 nginx
//平滑重启nginx:
kill -HUP 主进程号
//重启服务:
nginx -s reload
//检查配置文件是否有语法操作
./nginx -t
//或者显示指定配置文件
./nginx -t -c /usr/local/nginx/conf/nginx.conf
②nginx的配置文件(nginx.conf)

注意:修改配置文件之后需要重启nginx服务

参考文章:nginx配置详解_nginx 配置详解_吃炸鸡的前端的博客-CSDN博客

1、基础代码

简易版本

worker_processes  1;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       80;
        server_name  localhost;
        location / {
            root   html;
            index  index.html index.htm;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

 备注版本

#nginx进程数,建议设置为等于CPU总核心数。
worker_processes  1;
# 事件区块开始
events {
    #单个进程最大连接数(最大连接数=连接数*进程数)
    #根据硬件调整,和前面工作进程配合起来用,尽量大,但是别把cpu跑到100%就行。每个进程允许的最多连接数,理论上每台nginx服务器的最大连接数为。
    worker_connections  1024;
}
#设定http服务器,利用它的反向代理功能提供负载均衡支持
http {
    #include:导入外部文件mime.types,将所有types提取为文件,然后导入到nginx配置文件中
    include       mime.types;
     #默认文件类型
    default_type  application/octet-stream;
    #开启高效文件传输模式,sendfile指令指定nginx是否调用sendfile函数来输出文件,对于普通应用设为 on,如果用来进行下载等应用磁盘IO重负载应用,可设置为off,以平衡磁盘与网络I/O处理速度,降低系统的负载。注意:如果图片显示不正常把这个改成off。
    #sendfile指令指定 nginx 是否调用sendfile 函数(zero copy 方式)来输出文件,对于普通应用,必须设为on。如果用来进行下载等应用磁盘IO重负载应用,可设置为off,以平衡磁盘与网络IO处理速度,降低系统uptime。
    sendfile        on;
      #长连接超时时间,单位是秒
    keepalive_timeout  65;
    # 第一个Server区块开始,表示一个独立的虚拟主机站点
    server {
        # 提供服务的端口,默认80
        listen       80;
        # 提供服务的域名主机名
        server_name  localhost;
        #对 "/" 启用反向代理,第一个location区块开始
        location / {
            root   html;  #服务默认启动目录
            index  index.html index.htm; # 默认的首页文件,多个用空格分开
        }
         # 错误页面路由
        error_page   500 502 503 504  /50x.html; # 出现对应的http状态码时,使用50x.html回应客户
        location = /50x.html { # location区块开始,访问50x.html
            root   html;  # 指定对应的站点目录为html
        }
    }
}

2、基本理解 

关于vue配置代理(nginx)的一些学习记录,第1张全局块:
作用: 从配置文件开始到 events 块之间的内容,主要会设置一些影响nginx 服务器整体运行的配置指令,主要包括配置运行 Nginx 服务器的用户(组)、允许生成的 worker process 数,进程 PID 存放路径、日志存放路径和类型以 及配置文件的引入等。

比如上面第一行配置的

worker_processes  1;

这是 Nginx 服务器并发处理服务的关键配置,worker_processes 值越大,可以支持的并发处理量也越多,但是 会受到硬件、软件等设备的制约。

events块:
作用: events 块涉及的指令主要影响 Nginx 服务器与用户的网络连接,常用的设置包括是否开启对多 work process 下的网络连接进行序列化,是否 允许同时接收多个网络连接,选取哪种事件驱动模型来处理连接请求,每个 word process 可以同时支持的最大连接数等。

 worker_connections  1024;

http块:
作用: 这算是 Nginx 服务器配置中最频繁的部分,代理、缓存和日志定义等绝大多数功能和第三方模块的配置都在这里。

关于vue配置代理(nginx)的一些学习记录,第2张

3、nginx具体使用

先来了解一下什么是代理:

假设有两台主机AB,一台服务器,其中A主机代理(代替)B主机去访问服务器

①正向代理

正向代理的工作原理如下:

1、客户端向正向代理发送请求。

2、正向代理接收到请求后,将请求转发给目标服务器。

3、目标服务器将响应发送给正向代理。

4、正向代理将响应返回给客户端。

注意:正向代理是由客户端配置的

客户端         正向代理服务器         目标服务器
  |                  |                  |
  |    发送请求      |                  |
  |----------------->|                  |
  |                  |    转发请求      |
  |                  |----------------->|
  |                  |                  |
  |    接收响应      |                  |
  |<-----------------|                  |
  |                  |    返回响应      |
  |                  |<-----------------|
  |                  |                  |

关于vue配置代理(nginx)的一些学习记录,第3张

在客户端(浏览器)配置代理服务器,通过代理服务器进行互联网访问,通过www.123.com访问www.google.com。

②反向代理

反向代理的工作原理如下:

1、客户端向反向代理发送请求。

2、反向代理接收到请求后,根据配置的规则和算法,将请求转发到相应的目标服务器上。

3、目标服务器处理请求并生成响应。

4、反向代理将响应返回给客户端。

客户端         反向代理服务器         目标服务器
  |                  |                  |
  |    发送请求      |                  |
  |----------------->|                  |
  |                  |    转发请求      |
  |                  |----------------->|
  |                  |                  |
  |    接收响应      |                  |
  |<-----------------|                  |
  |                  |    返回响应      |
  |                  |<-----------------|
  |                  |                  |

关于vue配置代理(nginx)的一些学习记录,第4张

注意:反向代理是由目标服务器配置的,客户端对目标服务器的存在是透明的,只需要知道反向代理的地址即可访问目标服务器上的资源

③动静分离

将动态内容和静态内容分别处理和分发,以减轻服务器的负载和提高响应速度。

关于vue配置代理(nginx)的一些学习记录,第5张

④负载均衡

通过将请求分发给多个后端服务器来平衡服务器的负载

关于vue配置代理(nginx)的一些学习记录,第6张

4、vue3.0和vue2.x的配置跨域

注意:配置完代理需重启项目

①vue3.0

vue.config.js配置

module.exports = {
  devServer: {
    // 配置服务器代理
    proxy: {
      '/api': { // 代理接口前缀为/apis的请求
          ws: true,        //如果要代理 websockets,配置这个参数
          target: 'http://ip:端口', // 对应的代理地址
          secure: false, // 接受运行在https上,默认不接受
          changeOrigin: true, // 如果设置为true,那么本地会虚拟一个服务器接收你的请求并代你发送该请求,这样就不会有跨域问题(只适合开发环境)
          pathRewrite: { //重写路径 比如'/apis/aaa/ccc'重写为'/aaa/ccc'
            '^/api': ''
          }
      },
      // 配置多个代理
      '/service': {
            target: 'https://www.google.com/', // 对应的代理地址
            secure: false,
            changeOrigin: true,
            pathRewrite: { //重写路径 比如'/apis/aaa/ccc'重写为'/aaa/ccc'
                '^/service': '/'
            }
        },
    }
  },
}

axios请求文件

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
let api1= Vue.axios.create({
  method: 'GET',
  baseURL: '/api/' 
})
let api2 = Vue.axios.create({
  method: 'GET',
  baseURL: '/service/'
})
getData: (params) => {
  return api1({
    url: '/XXX/XXX/XXX/XXX', // 此处写地址,不具体举例
    params: {
      ...params
    }
  })
}
②vue2.x

请求还是按上述代码,下面是配置代理部分

在config文件夹下的index.js中,配置proxyTable,原本的proxyTable中为空

module.exports = {
  dev: {
    // 配置服务器代理
    proxyTable: {
      '/api': { // 代理接口前缀为/apis的请求
          ws: true,        //如果要代理 websockets,配置这个参数
          target: 'http://ip:端口', // 对应的代理地址
          secure: false, // 接受运行在https上,默认不接受
          changeOrigin: true, // 如果设置为true,那么本地会虚拟一个服务器接收你的请求并代你发送该请求,这样就不会有跨域问题(只适合开发环境)
          pathRewrite: { //重写路径 比如'/apis/aaa/ccc'重写为'/aaa/ccc'
            '^/api': ''
          }
      },
      // 配置多个代理
      '/service': {
            target: 'https://www.google.com/', // 对应的代理地址
            secure: false,
            changeOrigin: true,
            pathRewrite: { //重写路径 比如'/apis/aaa/ccc'重写为'/aaa/ccc'
                '^/service': '/'
            }
        },
    }
  },
}