Nginx常用配置1.跨域配置方案1 *：通配符，全部允许，存在安全隐患(不推荐)。方案2：多域名配置(推荐) 配置

1.跨域配置

方案1 *：通配符，全部允许，存在安全隐患(不推荐)。

 1     server {

  2         ...

  3         location / {

  4             # 允许 所有头部 所有域 所有方法

  5             add_header 'Access-Control-Allow-Origin' '*';

  6             add_header 'Access-Control-Allow-Headers' '*';

  7             add_header 'Access-Control-Allow-Methods' '*';

  8             # OPTIONS 直接返回204

  9             if ($request_method = 'OPTIONS') {

 10                 return 204;

 11             }

 12         }

 13         ...

 14     }

方案2：多域名配置(推荐)

配置多个域名在map中只有配置过的允许跨域：

  1  map $http_origin $corsHost {

  2         default 0;

  3         "~https://zzzmh.cn" https://zzzmh.cn;

  4         "~https://chrome.zzzmh.cn" https://chrome.zzzmh.cn;

  5         "~https://bz.zzzmh.cn" https://bz.zzzmh.cn;

  6     }

  7     server {

  8         ...

  9         location / {

 10             # 允许 所有头部 所有$corsHost域 所有方法

 11             add_header 'Access-Control-Allow-Origin' $corsHost;

 12             add_header 'Access-Control-Allow-Headers' '*';

 13             add_header 'Access-Control-Allow-Methods' '*';

 14             # OPTIONS 直接返回204

 15             if ($request_method = 'OPTIONS') {

 16                 return 204;

 17             }

 18         }

 19         ...

 20     }

补充：如果使用http-server 本地跑起服务解决跨域问题

http-server --cors='*'

2.前端项目部署

server {

  listen 8080;

  server_name localhost;

  # 默认访问

  # 部署路径：/home/web/my_demo

  # 访问路径为：http://localhost:8090/

  location / {

    try_files $uri $uri/ /index.html;

    proxy_set_header X-Real-IP $remote_addr;

    proxy_set_header Host $http_host;

    root /home/web/my_demo/;

    index index.html index.htm;

  }

 

  # 带前缀的访问

  # 部署路径：/home/web/my_demo

  # 访问路径为：http://localhost:8090/my_demo/

  # 如果location路径最后没有配置斜杠，则浏览器输入访问地址后，路径最后会自动拼一个斜杠

  location ^~/my_demo/ {

    try_files $uri $uri/ /my_demo/index.html;

    proxy_set_header X-Real-IP $remote_addr;

    proxy_set_header Host $http_host;

    root /home/web/;

    index index.html index.htm;

  }

}

上面带前缀的访问也可以使用alias进行配置，如下

  location ^~/my_demo/ {

    alias /home/web/my-demo/;

    index index.html index.htm;

    try_files $uri $uri/ /my_demo/index.html;

  }

2者的区别，可以看下别人的介绍,简单理解为root是根会把location的地址拼接在后面；而alias是关联别名，请求location的地址时，实际请求的是别名中的地址

h root#laliasMILEASMOIH.png

3实操案例

3.1 项目使用的是hash模式，打包用的是gulp,静态资源地址用的使用./, window.SITE_CONFIG['domain'] = ‘./‘

3.2 listen的端口是6666,nginx配置如下：

3.3实际访问路径

上面配置，假如用户访问example.com/hgqjWeb/240… 则实际访问的资源地址是 /u01/app/web/2409041735/css/app.css

3.4 本地打包产物，如下：

2409031807 static.png

实际请求路径都加了一层路由前缀，如下

#### 3.5 与没有加路由前缀的对比

8081端口下location / 则没有加路由前缀

nginx配置如下：

网络请求如下：

3.6 如果是webpack 项目，history模式，还需要修改

publicPath

AMELFANNATE#E. AROI WAS PRINCEIEME, IOLEA MIAO.png

像我们项目，本地还是/ ,测试环境才是/hgqjWeb。

publicPath设置为./是相对当前页面访问路径来的，是动态变化的。如果有多层目录可能存在问题，所以还是建议加上前缀。

history模式修改 router路由配置

nst router.png

4.请求后台接口代理配置

1.在9801端口下增加location配置，并代理到 http://comcheck/ 如下

2.配置 /comcheck/的负载均衡

请求后端代理地址有斜杠和没有斜杠的区别

有斜杠

server_name yjbtest.com;.png

nginx proxy_pass地址后面有斜杠，则会把/comp拼在comcheck前面，变成/comp/comcheck`。实际前端请求的api地址为

VITE_BASE_API = 'test.com:19801/comp/comche…'

没有斜杠

server name localhost;.png

（测试环境改成 window.SITE_CONFIG['baseUrl'] = '/comcheck/‘。之前 window.SITE_CONFIG['baseUrl'] = 'http://172.232.34:8080/comcheck/'

最后没有斜杠，则直接是/comcheck。负载均衡配置如上。

5.vite项目配置二级访问路径

1.前端设置路由base,可以在环境变量中配置如：

VITE_BASE_URL = '/shr-mobile/'

2.路由设置为history模式,这样访问的路由前缀会自动加上/shr-mobile/

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      redirect: '/home',
    },
  ],
});

3.vite.config.js的base配置

export default defineConfig(({ mode, command }) => {
  return {
    base: env.VITE_BASE_URL || '/'
  }
});

4.nginx配置

推荐使用alias ,注意try_files里面配置的路径需加上location配置的路径，否则会导致刷新时404

Nginx常用配置