方跃明的编程和电脑使用技巧分享

Appearance

nginx 同源调试 ​

方跃明 2023-09-11

由于同源策略的限制，跨源资源共享（CORS）默认禁止，比如A源禁止B源访问其Cookie。

此时，需要请求资源管理方修改策略允许访问，比如修改Access-Control-Allow-Origin。

或者，本地使用工具将资源代理为同源，比如Vite的server.proxy。

开发调试时，对于多个不同源的独立前端应用，推荐使用 nginx 配置代理来实现同源。

本地HTTPS调试

除代理同源外，nginx配合hosts可以接管互联网域名，结合 SSL 证书配置，实现本地 HTTP 调试。

目标 ​

配置代理实现应用A和应用B同源，B应用可以读取A应用的Cookie，实现免登。

应用代理前代理后说明
应用Ahttp://localhost:8080/http://localhost/app// => /app/
应用Bhttp://localhost:5173/cms/http://localhost/cms/

配置 ​

以下所有操作均在 Windows 11 环境下进行，其他操作系统请自行适配。

vue ​

应用A的.env.development

ini
VUE_APP_PUBLIC_PATH=./

应用B的.env.development

ini
VITE_PUBLIC_PATH=/cms/

nginx ​

nginx/conf/nginx.conf

nginx
http {
  # ...
  server {
    listen       80;
    server_name  localhost;
    location / {
      root   html;
      index  index.html index.htm;
      try_files $uri $uri/ /index.html;
    }
    # 引入同源调试配置
    include conf.d/location.conf;
    # ...
  }
}

nginx/conf/conf.d/location.conf

nginx
# 应用A
location /app/ {
  proxy_pass http://localhost:8080/;
}
# 应用B
location /cms/ {
  proxy_pass http://localhost:5173/cms/;
}

运行 ​

shell
cd 应用A根目录 && npm run serve   # 运行应用A（Vue CLI）
cd 应用B根目录 && npm run dev     # 运行应用B（Vite）
cd nginx根目录 && ./nginx         # 或双击nginx.exe

运行成功后，即可使用代理后的地址进行同源访问。

nginx
cors