nginx代理跨域

原创已于 2024-04-28 10:38:53 修改 · 1.3k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#nginx #运维

于 2023-12-18 17:26:08 首次发布

nginx

nginx的认识

首先nginx官方文档网站：nginx 文档

教程：https://www.w3schools.cn/nginx/nginx_command_conf.html

nginx是什么？

Nginx 是一款轻量级的 Web 服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器，其特点是占有内存少，并发能力强。

nginx能干什么？

Nginx 不仅提供了 Web 服务器的功能，还极大满足了这一主流架构的需求并提供了如下应用特性。

① 访问路由

现今大型网站的请求量早已不是单一 Web 服务器可以支撑的了。单一入口、访问请求被分配到不同的业务功能服务器集群，是目前大型网站的通用应用架构。Nginx 可以通过访问路径、URL 关键字、客户端 IP、灰度分流等多种手段实现访问路由分配。

② 反向代理

就反向代理功能而言，Nginx 本身并不产生响应数据，只是应用自身的异步非阻塞事件驱动架构，高效、稳定地将请求反向代理给后端的目标应用服务器，并把响应数据返回给客户端。其不仅可以代理 HTTP 协议，还支持 HTTPS、HTTP/2、FastCGI、uWSGI、SCGI、gRPC 及 TCP/UDP 等目前大部分协议的反向代理。

③ 负载均衡

Nginx 在反向代理的基础上集合自身的上游（upstream）模块支持多种负载均衡算法，使后端服务器可以非常方便地进行横向扩展，从而有效提升应用的处理能力，使整体应用架构可轻松应对高并发的应用场景。

④ 内容缓存

动态处理与静态内容分离是应用架构优化的主要手段之一，Nginx 的内容缓存技术不仅可以实现预置静态文件的高速缓存，还可以对应用响应的动态结果实现缓存，为响应结果变化不大的应用提供更高速的响应能力。

⑤ 可编程

Nginx 模块化的代码架构方式为其提供了高度可定制的特性，但可以用C语言开发 Nginx 模块以满足自身使用需求的用户只是少数。Nginx 在开发之初就具备了使用 Perl 脚本语言实现功能增强的能力。Nginx 对 JavaScript 语言及第三方模块对 Lua 语言的支持，使得其可编程能力更强。

nginx使用

下载安装（window版本)

运行指令

指令介绍

nginx version: nginx/1.25.3
Usage: nginx [-?hvVtTq] [-s signal] [-p prefix]
             [-e filename] [-c filename] [-g directives]

Options:
  -?,-h         : this help
  -v            : show version and exit
  -V            : show version and configure options then exit
  -t            : test configuration and exit
  -T            : test configuration, dump it and exit
  -q            : suppress non-error messages during configuration testing
  -s signal     : send signal to a master process: stop, quit, reopen, reload
  -p prefix     : set prefix path (default: NONE)
  -e filename   : set error log file (default: logs/error.log)
  -c filename   : set configuration file (default: conf/nginx.conf)
  -g directives : set global directives out of configuration file

-?,-h：查看帮助

-v：显示版本信息并退出

-V：显示版本和配置选项信息，然后退出

-t：检测配置文件是否有语法错误，然后退出

-T：检测配置文件语法，打印它并退出

-q：在配置测试期间，禁止显示非错误信息

-s：发送信号给主进程，stop 强制退出，quit 优雅的退出，reopen 重启，reload 重新加载配置

-p：设置 nginx 目录

-c：指定启动使用的配置文件（常用）

-g：在配置文件之外设置全局指令

注意如果指令关不了，直接杀进程。

http 配置

通过反向代理配置跨域请求头。

注意：nginx配置前提是服务端不设置。

跨域主要涉及4个响应头：

Access-Control-Allow-Origin 用于设置允许跨域请求源地址（预检请求和正式请求在跨域时候都会验证）

Access-Control-Allow-Headers 跨域允许携带的特殊头信息字段（只在预检请求验证）

Access-Control-Allow-Methods 跨域允许的请求方法或者说HTTP动词（只在预检请求验证）

Access-Control-Allow-Credentials 是否允许跨域使用cookies，如果要跨域使用cookies，可以添加上此请求响应头，值设为true（设置或者不设置，都不会影响请求发送，只会影响在跨域时候是否要携带cookies，但是如果设置，预检请求和正式请求都需要设置）。不过不建议跨域使用（项目中用到过，不过不稳定，有些浏览器带不过去），除非必要，因为有很多方案可以代替。

一般请求解决跨域：

    server {
        listen       777;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

          location / {
              add_header Access-Control-Allow-Origin '*';
              if ($request_method = 'OPTIONS') {
                return 204;
           }
            proxy_pass http://localhost:666;
        }

    }

预检请求解决跨域：

    server {
        listen       777;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

          location / {
              add_header Access-Control-Allow-Origin '*' always;
              if ($request_method = 'OPTIONS') {         
              add_header Access-Control-Allow-Headers 'token';//预检请求的产生条件。即有请求头的请求。
              add_header Access-Control-Allow-Origin '*';
              return 204;
           }
            proxy_pass http://localhost:666;
        }

    }

只要if ($request_method = ‘OPTIONS’) 里面写了 add_header 则必须在作用域里重新添加跨域请求头。

官方文档是这样说的：

There could be several add_header directives. These directives are inherited from the previous level if and only if there are no add_header directives defined on the current level.

意思就是当前层级无 add_header 指令时，则继承上一层级的add_header。相反的若当前层级有了add_header，就应该无法继承上一层的add_header。

add_header 指令用于添加返回头字段，当且仅当状态码为特定时有效。如果想要每次响应信息都携带头字段信息，需要在最后添加always（经我测试，只有Access-Control-Allow-Origin这个头信息需要加always，其他的不加always也会携带回来）。

前端:

      this.$axios({
        methods: "post",
        url: "http://localhost:777/api/getList",
        headers:{
          token:'asdfghj'
        }
      }).then((data) => {
        console.log(data);
      });