springboot learning series: JSP page calls JS, the page displays garbled characters

Problem scenario

Recently, the old project is being migrated and transformed, the technical framework is SSH3（Spring+Struts2+Hibernate）, and the project coding is GBK, JSPand JSeverything is GBKcoding. And we now generally use UTF-8coding for development, and many technologies are used by default UTF-8. So the problem is here. springbootStart the program and open the login JSPpage. After logging in, the original page is displayed normally, but JSsome garbled characters are displayed. This blog post mainly explains this situation.

Problem environment

software	version
springboot	2.1.1.RELEASE

problem causes

File encoding problem generated by target

JSIf garbled characters are displayed, the first idea is JSthat there is a problem with the encoding. Then I checked the garbled code, JSand the code in the project is GBKas shown below:

Then I checked the targetfile generated inside and found that the file is encoded as UTF-8. Because the project is used mavenfor development, it is necessary to code the resource settings, as shown in the figure below:

<properties>
   <project.build.sourceEncoding>GBK</project.build.sourceEncoding>
</properties>

<!-- 忽略无web.xml警告 -->
<plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-war-plugin</artifactId>
    <configuration>
        <failOnMissingWebXml>false</failOnMissingWebXml>
        <resourceEncoding>GBK</resourceEncoding>
    </configuration>
</plugin>

Here it maven-war-pluginis 3.2.2. In addition, specify when the package is generated -Dfile.encoding=GBK. After repackaging, you can see that the file encoding is GBK. However, if everyone thinks this is over, then it is too naive.

After the upgrade, I tested it, but it still didn't work, and the interface still showed garbled characters. Then, I wondered if it was because the conversion was performed when the file tomcatwas returned JS. According to this idea, I opened the console of Google Chrome, checked the garbled JSheader, and saw that the response parameter was Content-Typedisplayed application/javascript;charset=UTF-8. And JSPthe response parameter Content-Typeof the header is text/html;charset=GBK. Therefore, the correspondence JSor CSSencoding can be converted according to the filter .

Set filter for encoding conversion

Because it is an old project, and the project code is set GBK, so directly adjust the involved JSsum CSSto GBK, let me show the code!

@WebFilter(urlPatterns = {
    
     "*.js", "*.css" }, filterName = "ResourceCharacterEncodingFilter")
public class ResourceCharacterEncodingFilter implements Filter {
    
    
    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)
            throws IOException, ServletException {
    
    
        HttpServletRequest request = (HttpServletRequest) servletRequest;
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        String uri = request.getRequestURI().split("\\?")[0];
        // 非JS、CSS不必做转换
        if (!(uri.endsWith(".js") || uri.endsWith(".css"))) {
    
    
            defaultDo(request, response, filterChain);
            return;
        }
		// 设置为GBK
        request.setCharacterEncoding("GBK");
        response.setCharacterEncoding("GBK");

        filterChain.doFilter(request, response);
    }

    private void defaultDo(ServletRequest request, ServletResponse response, FilterChain filterChain)
            throws IOException, ServletException {
    
    
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");

        filterChain.doFilter(request, response);
    }
}

This filter is mainly aimed at JSand CSStranscoding! ! !

result

After adding this filter, after restarting, the project access is normal, and there is no garbled code.

to sum up

Many things need to be considered for the migration and transformation of old projects. This article mainly shows the problems encountered in the process of migration and transformation and their solutions.

Ask for praise

If my article is helpful to everyone, you can click like or favorite at the bottom of the article;
if there is a good discussion, you can leave a message;
if you want to continue to view my future articles, you can click Follow
You can scan the following QR code to follow me 'S public account: Fengye Zhixuege, check out my latest share!