使用polymer build构建后lit-html未找到及Nginx跨域问题求助

我来帮你逐个排查并解决这两个困扰你的问题：

一、polymer build后出现"lit-html not found"错误 #

问题分析 #

你的polymer build配置里，sources和extraDependencies只包含了自研源码、package.json以及webcomponentsjs的资源，但没有明确覆盖lit-html的依赖文件。polymer build默认不会自动打包所有npm依赖，尤其是当你在代码里使用规范的裸导入（比如import {html} from 'lit-html'）时，如果配置没指定lit-html的路径，构建工具就会漏掉它，导致运行时触发模块找不到的错误。

另外也得先确认：你的package.json里是否已经正确安装了lit-html（执行过npm install lit-html --save），如果依赖未安装或版本不匹配，也可能引发这类问题。

解决方案 #

1. 修改polymer build配置，添加lit-html到依赖范围
   更新你的polymer.json，把lit-html的npm包路径加入extraDependencies，确保构建工具能把它打包到产物中：

   {
     "entrypoint": "index.html",
     "shell": "src/school-home.js",
     "sources": [ "src/**.js", "package.json" ],
     "extraDependencies": [ 
       "node_modules/@webcomponents/webcomponentsjs/bundles/**",
       "node_modules/lit-html/**"  // 新增这一行，包含lit-html所有文件
     ],
     "builds": [ {"preset": "es6-bundled"} ]
   }
   

2. 验证代码导入方式
   确保你的代码里使用规范的npm导入路径，比如：

   import { html, render } from 'lit-html';
   

   不要用相对路径直接导入node_modules里的lit-html文件，polymer build会处理符合npm规范的导入。

3. 清理缓存后重新构建
   旧的构建缓存可能导致异常，先执行polymer clean清理缓存，再重新运行polymer build。

二、Nginx反向代理API时的CORS错误 #

问题分析 #

你的Nginx配置里用了if指令来处理不同请求方法的CORS头，但Nginx的if存在很多隐性问题——它的执行逻辑并非完全符合直觉，而且add_header指令默认只在响应状态码为200、201、204、206、301、302、303、304、307、308时才生效，这会导致很多场景下CORS头没有被正确添加。

另外，哪怕API和前端部署在同一服务器，只要端口不同（比如前端在8000，API在8080），浏览器依然会触发跨域检查，必须正确配置CORS头。

解决方案 #

重构你的CORS配置，去掉不可靠的if指令，改用更稳定的写法：

1. 修改API代理的location配置
   替换你当前的location ~ ^/(api|login|logout)块内容为：

   location ~ ^/(api|login|logout) {
       proxy_pass http://localhost:8080;
       proxy_set_header Connection "";
       proxy_set_header Host $host;
       proxy_set_header X-Real-IP $remote_addr;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
   
       # 专门处理OPTIONS预检请求
       if ($request_method = OPTIONS) {
           add_header 'Access-Control-Allow-Origin' 'http://localhost:8000';  # 替换为你的前端地址，带cookie时不能用*
           add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
           add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
           add_header 'Access-Control-Max-Age' 1728000;
           add_header 'Content-Type' 'text/plain; charset=utf-8';
           add_header 'Content-Length' 0;
           return 204;
       }
   
       # 给所有非OPTIONS请求添加CORS头，always确保所有状态码都生效
       add_header 'Access-Control-Allow-Origin' 'http://localhost:8000' always;
       add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
       add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range' always;
       add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;
   }
   

   注意：如果你的前端需要和API传递cookie（比如登录态），Access-Control-Allow-Origin不能用*，必须指定具体的前端域名/端口，同时前端请求要设置withCredentials: true。

2. 检查请求的Origin字段
   打开浏览器开发者工具的Network面板，查看跨域请求的Origin头，确认它和你Nginx里配置的Access-Control-Allow-Origin值完全匹配（包括协议、域名、端口）。

3. 重启Nginx使配置生效
   Windows下执行nginx.exe -s reload，重启Nginx后重新测试API调用。

内容的提问来源于stack exchange，提问作者reaper_unique