nginx 设置 Content Security Policy

vue项目本地开发接口调试时，使用proxy配置反向代理即可，如果线上到不同的服务器会有跨域问题，也可以让后端添加白名单，现在研究下nginx 的配置项下面分享基本的配置及使用代理访问。

nginx 安装及配置

1. nginx下载

下载地址，找到对应系统版本下载（演示使用的是windows - 1.10.3 版本）

成功后解压即可。

页面视图

2. 常用命令 windows

启动：直接点击Nginx目录下的nginx.exe 或者 cmd运行start nginx
关闭：./nginx -s stop 或者 ./nginx -s quit
修改配置后重新加载生效：./nginx -s reload

命令在nginx所在目录执行

3. nginx 运行

双击nginx.exe 运行，

浏览器地址栏输入 http://localhost:80，显示下面即启动成功

未启动nginx 显示如下图所示：

4. 访问

修改nginx目录下confg/nginx.conf 文件

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  192.168.1.62;
        location ^~ / {
            root   F:/code/st/Vue/demo-vue3-ts/dist/;
            index  index.html index.htm;
        }
        location ^~ /hc/api {
           proxy_pass  http://192.168.1.57:58103;
        }
    }
}

浏览器输入 192.168.1.62:80，如下图所示。可访问打包后的dist/index.html 文件。调用接口返回200。

5. 配置项说明

root

用root属性指定的值是要加入到最终路径中的，匹配条件会拼接到路径中

alias

用alias属性指定的值不需要加入到最终路径中，注意：alias指定的路径结尾要加”/”; 如配置中间路由

location /projectA/ {
     alias  F:/code/st/Vue/demo-vue3-ts/dist/projectA/;
   }

请求http://192.168.1.62:80/projectA/ 将跳转到 F:/code/st/Vue/demo-vue3-ts/dist/projectA/index.html 页面，可以更加项目名称打包后，配置对应路径。如图：

location

= 开头表示精确匹配。如 A 中只匹配根目录结尾的请求，后面不能带任何字符串；
^~ 开头表示uri以某个常规字符串开头，不是正则匹配；
~ 开头表示区分大小写的正则匹配；
~* 开头表示不区分大小写的正则匹配；
/ 通用匹配, 如果没有其它匹配,任何请求都会匹配到。

proxy_pass

情况一：转发的uri最后没有带 / ；

location ^~ /hc/api {
        proxy_pass  http://192.168.1.57:58103;
     }

访问 http://192.168.1.62:80/hc/api/goodsInfo/queryListByPage 则转发到 http://192.168.1.57:58103/hc/api/goodsInfo/queryListByPage；

情况二：转发的uri最后带 / ；

location ^~ /hc/api {
        proxy_pass  http://192.168.1.57:58103/;
     }

访问 http://192.168.1.62:80/hc/api/goodsInfo/queryListByPage 则转发到 http://192.168.1.57:58103/goodsInfo/queryListByPage；

rewrite

location /view/ {
          alias  F:/code/st/Vue/demo-vue3-ts/dist/view/;
    }
    location /web/ {
         rewrite ^/web/(.+).html$  /view/$1.html redirect;
     }

url 重写, 当http://192.168.1.62/web/b.html 时，重定向到http://192.168.1.62/view/b.html