localhost环境引入Facebook SDK.js遇Firefox报错及Chrome异常求助

Let's break down your issue step by step: you're developing locally on localhost, and suddenly the Facebook SDK (https://connect.facebook.net/en_US/sdk.js) stopped loading entirely—Firefox throws a <script> source URI is not allowed in this document error, Chrome shows an application data fetch error, and the browser doesn't even send a GET request for the SDK file. Since this worked before, the problem is likely a recent change in your environment or browser settings.

Here are the most likely fixes to try:

1. Check Your Content Security Policy (CSP) #

This is the #1 culprit for "source URI not allowed" errors. Browsers use CSP to block unauthorized resource loads, and if your page's CSP doesn't explicitly allow connect.facebook.net, it'll block the SDK before even sending a request.

• How to check: Look for a <meta http-equiv="Content-Security-Policy"> tag in your HTML head, or check your server's response headers (use browser dev tools > Network tab > check response headers for Content-Security-Policy).
• Fix: Update your CSP to include https://connect.facebook.net in the script-src directive. For example:

  <meta http-equiv="Content-Security-Policy" content="script-src 'self' https://connect.facebook.net;">
  

  If your CSP is set on the server (Apache/Nginx/etc.), adjust the configuration to add the Facebook domain to script-src.

2. Rule Out Browser Extensions & Caching #

Privacy or ad-blocking extensions (like uBlock Origin, Privacy Badger) often block Facebook resources by default, even on localhost. Old cached settings can also cause unexpected blocks.

• Fixes:
  • Open your page in incognito/private mode (this disables most extensions and uses a fresh cache).
  • Clear your browser's cache and do a hard refresh (Ctrl+Shift+R on Windows/Linux, Cmd+Shift+R on Mac).
  • Temporarily disable all extensions and test again.

3. Test for Mixed Content or Protocol Issues #

If you're accessing your local site over http://localhost, while the SDK uses https, modern browsers usually allow this—but some strict security settings might still block it. Conversely, if you're using https://localhost with a self-signed certificate, the browser might flag the connection as untrusted and block external resources.

• Fix:
  • Try switching to https://localhost (use tools like mkcert to generate a trusted self-signed certificate for local development).
  • If you stick with http, check your browser's security settings to ensure mixed content isn't blocked entirely.

4. Verify Your SDK Initialization Code #

While you said this worked before, it's worth double-checking that your SDK loading script wasn't accidentally modified or commented out. Make sure you're using the standard async loading pattern:

window.fbAsyncInit = function() {
  FB.init({
    appId      : 'YOUR_APP_ID',
    cookie     : true,
    xfbml      : true,
    version    : 'v18.0' // Use the latest supported version
  });
};

(function(d, s, id){
   var js, fjs = d.getElementsByTagName(s)[0];
   if (d.getElementById(id)) return;
   js = d.createElement(s); js.id = id;
   js.src = "https://connect.facebook.net/en_US/sdk.js";
   fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

Ensure this code is running before any other scripts that depend on the Facebook SDK.

5. Eliminate Network/Proxy Interference #

Rarely, local proxies or firewall settings might block outgoing requests to Facebook's domain. To rule this out:

• Directly visit https://connect.facebook.net/en_US/sdk.js in your browser—if it loads, network issues aren't the problem.
• Disable any local proxy servers (like those from VPNs or developer tools) and test again.

Start with the CSP and extension checks first—those are the most common fixes for this exact scenario. If none of these work, create a minimal test page with just the SDK loading code to isolate the issue from other parts of your application.

内容的提问来源于stack exchange，提问作者Ikhlak S.