Salesforce LWC调用API遭CSP拒绝，已配置相关设置仍未解决

以下是针对该问题的具体排查和解决步骤：

• 确认CSP配置的完整性
  必须同时完成两项配置：

  1. 在Setup > CSP Trusted Sites中添加目标API的完整域名（如https://example.com），勾选Allow site for CSP；如果API实际调用的是子域名（比如api.example.com），必须单独添加该子域名，主域名不会自动覆盖子域名。
  2. 在Setup > Session Settings的CSP Trusted Sites区域，重复添加该域名，确保两处配置一致。

• 核对实际请求地址
  打开浏览器开发者工具（F12）的Network标签，触发API调用后查看请求的真实URL：

  • 是否误用了http协议（CSP通常要求HTTPS）？
  • 是否存在重定向？比如请求https://example.com后被跳转到未配置的https://api.example.com，这种情况必须把重定向后的域名也加入CSP。

• 解析控制台的CSP错误详情
  浏览器控制台的错误信息会明确指出违反了哪条CSP指令（比如connect-src），确认你的CSP策略中connect-src已包含目标域名。部分场景下，即使添加了Trusted Site，也需要手动在自定义CSP策略中显式声明connect-src。

• 检查跨域（CORS）支持
  LWC直接用fetch调用外部API时，目标服务器必须支持CORS，即返回Access-Control-Allow-Origin等响应头。如果目标API不支持CORS，必须改用Apex代理：

  1. 创建Named Credential配置目标API地址（避免硬编码密钥和地址）
  2. 编写Apex代理类：

     public with sharing class ApiProxyController {
         @AuraEnabled(cacheable=false)
         public static String callExternalApi(String inputValue) {
             HttpRequest req = new HttpRequest();
             req.setEndpoint('callout:YourNamedCredential'); // 替换为你的Named Credential名称
             req.setMethod('POST');
             req.setHeader('Content-Type', 'application/json');
             req.setBody(JSON.serialize(new Map<String, Object>{'text' => inputValue}));
             
             Http http = new Http();
             HttpResponse res = http.send(req);
             return res.getBody();
         }
     }
     

  3. 修改LWC中的调用逻辑：

     import callExternalApi from '@salesforce/apex/ApiProxyController.callExternalApi';
     
     getApiDetails() {
         callExternalApi({ inputValue: this.inputValue })
             .then(result => {
                 const repos = JSON.parse(result);
                 if (repos?.matched_answer === null) {
                     this.serchDetails = `there is no data exists against such keywords "${this.inputValue}"`;
                 } else {
                     this.serchDetails = JSON.stringify(repos?.matched_answer?.answer);
                 }
                 console.log(this.serchDetails);
             })
             .catch(error => {
                 console.error("error", error);
                 this.serchDetails = error;
             });
     }
     

• 排除配置生效延迟
  Salesforce的配置变更可能需要几分钟生效，尤其是Sandbox环境。可以尝试刷新页面、重新登录，或清除浏览器缓存后再测试。

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