Mac上Nginx安装，使用，解决跨域全过程

背景

在调用一个兄弟团队的api接口的时候，本地起一个localhost:8080，结果报跨域错误。一个朋友建议本地使用Nginx可以解决跨域问题，于是试试。

安装过程（执行命令）：

1，/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
很久才成功，可能是网络被墙的原因

2，brew install nginx
先运行brew update一直没反应，只好跳过。

==> Downloading https://ghcr.io/v2/homebrew/core/ca-certificates/manifests/2022-04-26
Already downloaded: /Users/oker/Library/Caches/Homebrew/downloads/21a4c3d0a8e54b4921528b9379605fac4a683424a7a4cb0a2b5f098e18f3e229--ca-certificates-2022-04-26.bottle_manifest.json
==> Downloading https://ghcr.io/v2/homebrew/core/ca-certificates/blobs/sha256:c05a44feba2a630de2e1cefba90d3aa3f74e4d57146c0117858f648c419abeae
Already downloaded: /Users/oker/Library/Caches/Homebrew/downloads/52841b405d320473ad2cd55a4a6b2599d57c847d0adf58be89b05929f3c2736c--ca-certificates--2022-04-26.all.bottle.tar.gz
==> Downloading https://ghcr.io/v2/homebrew/core/openssl/1.1/manifests/1.1.1o
Already downloaded: /Users/oker/Library/Caches/Homebrew/downloads/75e64159933cb7401740964ef8681602932bd4c67aade21021fd522238a05e20--openssl@1.1-1.1.1o.bottle_manifest.json
==> Downloading https://ghcr.io/v2/homebrew/core/openssl/1.1/blobs/sha256:1da475def33874bd51321fcf9bef11a6b11d9e5a8079d9303b48f6a54b20a226
==> Downloading from https://pkg-containers.githubusercontent.com/ghcr1/blobs/sha256:1da475def33874bd51321fcf9bef11a6b11d9e5a8079d9303b48f6a54b20
######################################################################## 100.0%
==> Downloading https://ghcr.io/v2/homebrew/core/pcre2/manifests/10.40
######################################################################## 100.0%
==> Downloading https://ghcr.io/v2/homebrew/core/pcre2/blobs/sha256:b25728793286a5fcd8a92d4a75033e20df74c60ffe1d5d886ea5ad719fe25927
==> Downloading from https://pkg-containers.githubusercontent.com/ghcr1/blobs/sha256:b25728793286a5fcd8a92d4a75033e20df74c60ffe1d5d886ea5ad719fe2
######################################################################## 100.0%
==> Downloading https://ghcr.io/v2/homebrew/core/nginx/manifests/1.21.6_1
######################################################################## 100.0%
==> Downloading https://ghcr.io/v2/homebrew/core/nginx/blobs/sha256:e3f1eec4488b61a4c6bb56f338b30fbd1472a409db8a3bada92933fb92dc4b95
==> Downloading from https://pkg-containers.githubusercontent.com/ghcr1/blobs/sha256:e3f1eec4488b61a4c6bb56f338b30fbd1472a409db8a3bada92933fb92dc
######################################################################## 100.0%
==> Installing dependencies for nginx: ca-certificates, openssl@1.1 and pcre2
==> Installing nginx dependency: ca-certificates
==> Pouring ca-certificates--2022-04-26.all.bottle.tar.gz
==> Regenerating CA certificate bundle from keychain, this may take a while...
  /usr/local/Cellar/ca-certificates/2022-04-26: 3 files, 215.6KB
==> Installing nginx dependency: openssl@1.1
==> Pouring openssl@1.1--1.1.1o.catalina.bottle.tar.gz
  /usr/local/Cellar/openssl@1.1/1.1.1o: 8,089 files, 18.5MB
==> Installing nginx dependency: pcre2
==> Pouring pcre2--10.40.catalina.bottle.tar.gz
  /usr/local/Cellar/pcre2/10.40: 230 files, 6.4MB
==> Installing nginx
==> Pouring nginx--1.21.6_1.catalina.bottle.tar.gz
==> Caveats
Docroot is: /usr/local/var/www

The default port has been set in /usr/local/etc/nginx/nginx.conf to 8080 so that
nginx can run without sudo.

nginx will load all files in /usr/local/etc/nginx/servers/.

To restart nginx after an upgrade:
  brew services restart nginx
Or, if you don't want/need a background service you can just run:
  /usr/local/opt/nginx/bin/nginx -g daemon off;
==> Summary
  /usr/local/Cellar/nginx/1.21.6_1: 26 files, 2.2MB
==> Running `brew cleanup nginx`...
Disable this behaviour by setting HOMEBREW_NO_INSTALL_CLEANUP.
Hide these hints with HOMEBREW_NO_ENV_HINTS (see `man brew`).
==> Caveats
==> nginx
Docroot is: /usr/local/var/www

The default port has been set in /usr/local/etc/nginx/nginx.conf to 8080 so that
nginx can run without sudo.

nginx will load all files in /usr/local/etc/nginx/servers/.

To restart nginx after an upgrade:
  brew services restart nginx
Or, if you don't want/need a background service you can just run:
  /usr/local/opt/nginx/bin/nginx -g daemon off;

查看安装情况

brew search nginx

oker@okerdeMacBook-Pro  ~  brew search nginx
==> Formulae
nginx ✔

brew info nginx

 oker@okerdeMacBook-Pro  ~  brew info nginx
nginx: stable 1.21.6 (bottled), HEAD
HTTP(S) server and reverse proxy, and IMAP/POP3 proxy server
https://nginx.org/
/usr/local/Cellar/nginx/1.21.6_1 (26 files, 2.2MB) *
  Poured from bottle on 2022-06-17 at 11:13:17
From: https://github.com/Homebrew/homebrew-core/blob/HEAD/Formula/nginx.rb
License: BSD-2-Clause
==> Dependencies
Required: openssl@1.1 ✔, pcre2 ✔
==> Options
--HEAD
    Install HEAD version
==> Caveats
Docroot is: /usr/local/var/www

The default port has been set in /usr/local/etc/nginx/nginx.conf to 8080 so that
nginx can run without sudo.

nginx will load all files in /usr/local/etc/nginx/servers/.

To restart nginx after an upgrade:
  brew services restart nginx
Or, if you don't want/need a background service you can just run:
  /usr/local/opt/nginx/bin/nginx -g daemon off;

==> Analytics
install: 25,609 (30 days), 90,463 (90 days), 453,284 (365 days)
install-on-request: 25,566 (30 days), 90,262 (90 days), 452,347 (365 days)
build-error: 35 (30 days)

捕捉到的重要信息有：

nginx安装路径：/usr/local/Cellar/nginx/1.21.6_1 (26 files, 2.2MB) *

Docroot is: /usr/local/var/www
The default port has been set in /usr/local/etc/nginx/nginx.conf to 8080 so that
nginx will load all files in /usr/local/etc/nginx/servers/.

启动

nginx原生常用命令启动、停止、重新加载配置文件(不推荐)

nginx #启动nginx
nginx -s reload #重新加载配置文件 ，热加载配置文件
nginx -s quit #:推荐 待nginx进程处理任务完毕进行停止
nginx -s stop #:先查出nginx进程id再使用kill命令强制杀掉进程。

启动、停止、重启nginx(推荐)

brew services start nginx
brew services stop nginx
brew services restart nginx  # To restart nginx after an upgrade:

查看启动是否成功：

ps -ef | grep nginx

ps aux | grep nginx

http://localhost:8080/  （第一次成功，会让你很开心）

配置文件修改

默认配置

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       8080;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}
    include servers/*;
}

代理配置

    server {
        #listen       8080;
        listen        8082;
        # server_name  localhost;
        server_name  okc.oklink.com;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Credentials true;
        add_header Access-Control-Allow-Methods GET,POST,OPTIONS;

        location /api/explorer/v1/ {
            proxy_pass https://www.oklink.com;
            root   html;
            index  index.html index.htm;
        }

        location / {
            proxy_pass http://localhost:8081;
            root   html;
            index  index.html index.htm;
        }

跨域问题，终于调通了。

原理是：

1，自己起了一个localhost:8081的一个前端服务，去访问（此时跨域）

http://localhost:8082/api/explorer/v1/okc/exceed500tx?time=20220509

2，在nginx配置代理，如上所示

3，访问 http://localhost:8082/  通过nginx的 location / {

匹配到 http://localhost:8081/

4，在8081服务内，调用了http://localhost:8082/api/explorer/v1/okc/exceed500tx?time=20220509

通过nginx的 location /api/explorer/v1/ {

匹配到 https://www.oklink.com;

因为同是http://localhost:8082/，所以不跨域

所以拿到数据。success！！！

参考文档：

https://juejin.cn/post/6986192474213941262

https://www.cnblogs.com/54chensongxia/p/12938929.html