如何编写CORS扩展规则解决预检请求错误？

核心配置逻辑 #

你的问题根源是PLC服务器未返回CORS响应头，导致浏览器的OPTIONS预检请求被拦截。CORS扩展需要强制为PLC的响应添加必要头，同时覆盖预检请求和业务请求：

1. 精准匹配PLC目标地址 #

因为要访问多台局域网PLC，建议匹配IP段而非单个IP：

• 目标地址规则：http://192.168.0.*/*（覆盖该网段下所有路径）
• 若为固定IP列表，可写为：http://192.168.0.3/*,http://192.168.0.4/*

2. 必须添加的CORS响应头 #

这些头要同时应用于OPTIONS预检请求和POST/GET等业务请求：

• Access-Control-Allow-Origin: 设为你的Angular应用地址 http://localhost:4200（或用*，localhost场景下兼容）
• Access-Control-Allow-Methods: 包含GET,POST,OPTIONS（必须加OPTIONS，否则预检不通过）
• Access-Control-Allow-Headers: 若你的请求带自定义头（比如西门子Soft Comfort用的特定头），列出对应名称；不确定的话直接设为*
• Access-Control-Allow-Credentials: 设为true（西门子登录请求大概率需要携带认证信息）

主流CORS扩展的具体配置示例 #

Allow CORS: Access-Control-Allow-Origin #

1. 打开扩展设置，点击「Add Rule」
2. Request URL: 填入 http://192.168.0.*/*
3. Origin: 填入 http://localhost:4200
4. Access-Control-Allow-Origin: 选「Custom」，输入 http://localhost:4200
5. Access-Control-Allow-Methods: 勾选 GET, POST, OPTIONS
6. Access-Control-Allow-Headers: 选「Custom」，输入 *
7. Access-Control-Allow-Credentials: 勾选 true
8. 保存规则后，刷新Angular应用或重启Chrome

CORS Unblock #

1. 右键扩展图标，选择「Options」
2. 在「Allowed Origins」添加 http://localhost:4200
3. 在「Allowed Destinations」添加 http://192.168.0.*
4. 勾选「Allow Credentials」和「Handle Preflight Requests」
5. 保存设置后刷新页面

排查验证步骤 #

• 确认扩展处于启用状态，且未被Chrome隐身模式/隐私设置禁用
• 打开Chrome开发者工具「Network」面板，查看OPTIONS请求的响应头，确认Access-Control-Allow-Origin等头已被扩展添加
• 若Angular请求用的是application/json类型，可尝试改为application/x-www-form-urlencoded（西门子Soft Comfort大概率用这个），减少预检触发概率
• 清除浏览器缓存和Cookie，避免旧缓存干扰

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