使用jQuery Ajax调用外部API时出现CSP:blocked错误求助

嘿，你遇到的csp:blocked错误百分百是内容安全策略（CSP） 在搞事情！而且因为CSP是浏览器直接在请求发送前就拦下来了，所以你的Ajax的success和error回调根本没机会触发，这就是代码直接跳出的原因。

下面给你一步步拆解解决方法：

1. 先搞清楚是哪条CSP规则在拦你 #

首先打开浏览器的开发者工具（按F12）：

• 看Console面板，里面的CSP报错会明确告诉你，是connect-src这条规则限制了请求的域名（毕竟你是发Ajax请求，归connect-src管）
• 再去Network面板，看页面加载时的响应头，找到Content-Security-Policy字段，查里面的connect-src有没有包含https://jsonplaceholder.typicode.com——大概率是没有，所以才被拦了

2. 修改CSP规则（如果你能改网站配置的话） #

如果这是你自己的网站，那直接调整CSP的connect-src指令就行：

• 如果是通过HTTP响应头设置的CSP，把connect-src改成：connect-src 'self' https://jsonplaceholder.typicode.com;（'self'是允许同域请求，后面加上你要访问的域名）
• 如果是用页面里的<meta>标签设置的，改成这样：

<meta http-equiv="Content-Security-Policy" content="connect-src 'self' https://jsonplaceholder.typicode.com;">

3. 临时调试的小技巧 #

要是你只是想临时测试接口，不想改CSP，可以试试这俩办法：

• 给浏览器加启动参数关闭CSP（比如Chrome用--disable-web-security，但注意这只适合本地调试，别用来正常上网）
• 用Postman这类API工具直接测接口，先确认接口本身是正常的，排除接口问题

顺便给你优化下Ajax代码 #

你的POST请求传了空对象，虽然jsonplaceholder不介意，但规范点的话可以转成JSON字符串，或者干脆去掉data（如果接口不需要请求体）：

$.ajax({
  url: "https://jsonplaceholder.typicode.com/posts/1",
  contentType: 'application/json',
  type: "POST",
  data: JSON.stringify({}), // 明确转成JSON格式
  success: function(result) {
    console.log("请求成功啦:", result);
  },
  error: function(xhr, status, error) {
    console.error("请求翻车了:", status, error);
  }
});

不过这个只是代码规范优化，核心还是得解决CSP的问题哈。

总的来说，就是CSP不让你请求这个外部域名，把规则改了就能正常触发Ajax回调了~

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