Mac nginx的相关使用与跨域问题

一、nginx的安装

1、使用brew

brew install nginx 安装比较慢，最后会将下载的nginx放在/usr/local/Cellar中。如果不确定可以使用which nginx，与ls -rlt +which查出的地址(一般是usr/local/bin)的命令找到nginx安装目录。

brew info nginx 查看配置文件nginx.conf目录/usr/local/etc/nginx/nginx.conf

MrzhuangdeMacBook-Pro:1.21.6_1 mrzhuang$ brew info nginx
nginx: stable 1.21.6, HEAD
HTTP(S) server and reverse proxy, and IMAP/POP3 proxy server
https://nginx.org/
/usr/local/Cellar/nginx/1.21.6_1 (11 files, 2.1MB) *
 Built from source on 2022-04-12 at 10:33:16
From: https://mirrors.ustc.edu.cn/homebrew-core.git/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: 39,084 (30 days), 123,812 (90 days), 486,412 (365 days)
install-on-request: 39,000 (30 days), 123,600 (90 days), 485,411 (365 days)
build-error: 24 (30 days)

相关的命令：

1、nginx启动

方法1.在终端任何路径使用nginx

方法2.执行/usr/local/opt/nginx/bin/nginx
或者通过安装全路径实现：
执行/usr/local/Cellar/nginx/1.21.6_1/bin/ninx

方法3.到/usr/local/opt/nginx/bin目录下使用./nginx
或者到安装目录的bin目录/usr/local/Cellar/nginx/1.21.6_1/bin下
执行./nginx

2、nginx关闭

方法1.在终端任何路径执行nginx -s stop

方法2.执行/usr/local/opt/nginx/bin/nginx -s stop
或者通过安装全路径实现：
执行/usr/local/Cellar/nginx/1.21.6_1/bin/ninx -s stop

方法3.到/usr/local/opt/nginx/bin目录下执行./nginx -s stop
或者到安装目录的bin目录/usr/local/Cellar/nginx/1.21.6_1/bin下
执行./nginx -s stop

3、nginx重启

在修改nginx.conf文件之后需要重启nginx服务

方法1.在终端任何路径执行nginx -s reload
或者通过安装全路径实现：
/usr/local/Cellar/nginx/1.21.6_1/bin/ninx -s reload

方法2.执行/usr/local/opt/nginx/bin/nginx -s reload
或者通过安装全路径实现：
执行/usr/local/Cellar/nginx/1.21.6_1/bin/ninx -s reload

方法3.到/usr/local/opt/nginx/bin目录下执行./nginx -s reload
或者到安装目录的bin目录/usr/local/Cellar/nginx/1.21.6_1/bin下
执行./nginx -s stop

4、brew实现nginx的开启、关闭和重启

brew services start nginx 开启nginx服务
brew services stop nginx 关闭nginx服务
brew services restart nginx 重启nginx服务
好像有可能需要关闭防火墙

2、官网下载

http://nginx.org/en/download.html
关于启动、关闭和重启看官方文档

二、nginx的使用与跨域问题

跨域 ：指的是浏览器不能执行其他网站的脚本，它是由浏览器的额同源策略造成的，是浏览器对JS施加的安全限制。
同源策略：是指协议、域名、端口号都要相同。只要其中一个不一样就会产生跨域。

nginx实现跨域的原理，实际就是把前端项目和后端接口项目放到一个域中，这样就不存在跨域问题，然后根据请求地址去请求不同服务器(真正使用的服务器)；
案例：
目标服务1： http://localhost:1010/product/category/list/tree
目标服务2： http://localhost:8080/renren-fast/*
前端地址 http://localhost:8001向后端发送请求http://localhost:9100/api/* 9100端口为nginx的服务端口
nginx.conf配置文件的配置如下：

server {
       listen      9100;
            
      server_name  localhost;
            # #允许跨域请求的域，* 代表所有
            # add_header 'Access-Control-Allow-Origin' http://localhost:8001;
            # #允许请求的header
            # add_header 'Access-Control-Allow-Headers' *;
            # #允许带上cookie请求
            # add_header 'Access-Control-Allow-Credentials' true;
            # #允许请求的方法，比如 GET,POST,PUT,DELETE
            # add_header 'Access-Control-Allow-Methods' *;
         location /api/product/ {
              #1.重写路径，将/api/用/代替,
              #请求路径地址变为http://localhost:8001/product/*
               rewrite ^/api/(.*)$ /$1 break;
              #2.转发地址http://localhost:1010/product/*
               proxy_pass http://localhost:1010;
               }

         location /api/ {
             #1.重写路径，将/api/用/renren-fast/代替,
             #
            rewrite ^/api/(.*)$  /renren-fast/$1 break;
            #2.转发地址,
            #请求地址变为http://localhost:8080/renren-fast/*            
            proxy_pass http://localhost:8080/; 
               }                
}

后端增加一个配置类：

package com.zhuang.mall.product.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
            .allowedOrigins("*")
            .allowCredentials(true)
            .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
            .maxAge(3600);
    }
}

没有添加跨域配置产生的跨域问题：

添加跨域配置后：

问题：一开始只是在nginx.conf的http的server块中添加如下的配置：
#允许跨域请求的域，* 代表所有
add_header ‘Access-Control-Allow-Origin’ >http://localhost:8001;
#允许请求的header
add_header ‘Access-Control-Allow-Headers’ *;
#允许带上cookie请求
add_header ‘Access-Control-Allow-Credentials’ true;
#允许请求的方法，比如 GET,POST,PUT,DELETE
add_header ‘Access-Control-Allow-Methods’ *;
对于第一个login请求可以实现跨域，但是后面的系统菜单的请求还是遇到了跨域的问题，我是各种方法都试了，都没用！无奈只能在后端进行跨域的配置！！！ 使用的nginx的版本是1.21.6