Spring Security与jQuery集成报错：Uncaught SyntaxError: Unexpected token <

Hey there, let's break down this issue and fix it together! That Unexpected token < error in your login.js is a super common gotcha when working with Spring Security and static resources—here's exactly what's happening and how to fix it:

What's Causing This Error? #

When your browser tries to load login.js, it expects a JavaScript file with a Content-Type like application/javascript. Instead, your server is returning an HTML file (usually the Spring Security login page or a 404 error page), which starts with <html> or <!DOCTYPE>—hence the parser choking on the < character. This almost always means Spring Security is intercepting your static resource request and redirecting you to the login page instead of serving the JS file.

Step-by-Step Fixes #

1. Update Spring Security to Permit Static Resources

First, make sure your Security configuration explicitly allows access to your JS (and CSS/image) files. In your SecurityConfig class, add a rule to whitelist your static resource paths:

import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;

@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
            .authorizeRequests()
                // Allow unauthenticated access to all JS/CSS/images
                .antMatchers("/js/**", "/css/**", "/images/**").permitAll()
                // Require authentication for all other requests
                .anyRequest().authenticated()
            .and()
            .formLogin()
                // Configure your login page URL here if needed
                .loginPage("/login")
                .permitAll(); // Allow access to the login page itself
    }
}

• Adjust the antMatchers paths to match where your static resources are stored. For example, if your login.js is in src/main/resources/static/js/, the path /js/** will correctly target it.

2. Verify Your JS File Path in the HTML

Double-check that you're referencing login.js with the correct absolute path in your HTML template:

<!-- Correct absolute path -->
<script src="/js/login.js"></script>

<!-- Avoid relative paths like this (they can break if your page URL changes) -->
<script src="./login.js"></script>

3. Validate the Server Response in DevTools

To confirm the fix is working, use your browser's DevTools:

1. Open F12 → Go to the Network tab
2. Refresh your page and find the login.js request
3. Check the Response Headers section:
   • You should see Content-Type: application/javascript (or text/javascript)
   • If you still see text/html, that means the resource is still being intercepted—double-check your SecurityConfig rules.

4. Ensure Static Resources Are in the Right Location (Spring Boot)

If you're using Spring Boot, make sure your login.js is stored in one of the default static resource directories:

• src/main/resources/static/
• src/main/resources/public/
• src/main/resources/resources/
  Spring Boot automatically serves files from these locations without extra configuration—just make sure your request path matches the folder structure (e.g., static/js/login.js maps to /js/login.js).

Quick Troubleshooting Tip #

If you're still having issues, temporarily disable Spring Security (comment out the @EnableWebSecurity annotation) and test if login.js loads correctly. If it does, you know the problem is definitely in your SecurityConfig rules—adjust the antMatchers until the resource is properly whitelisted.

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