关于AJAX跨域的两种解决方法

记录一下自己解决ajax跨域无法正常显示的两种解决方案。

后端解决方法（配置filter）

我用的是SpringBoot，使用下面配置即可。

package com.example.config;

import org.springframework.stereotype.Component;

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@Component
// urlPatterns 后面的参数表示请求的url,filterName首字母最好小写 
@WebFilter(urlPatterns = {"/*"}, filterName = "corsFilter")
public class CORSFilter implements Filter {
    @Override
    public void init(FilterConfig filterConfig){

    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain chain) throws IOException, ServletException {
        HttpServletRequest request = (HttpServletRequest) servletRequest;
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        response.addHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
        response.addHeader("Access-Control-Allow-Methods", "*");
        response.addHeader("Access-Control-Allow-Headers", "Content-Type");
        //TODO 开启 cookie跨域
        response.setHeader("Access-Control-Allow-Credentials", "true");
        //TODO 有效期30分钟
        response.addHeader("Access-Control-Max-Age", "1800");
        //response.addHeader("Access-Control-Expose-Headers", "token");
        //response.setHeader("token", "111111111111111");
        filterChain.doFilter(request, response);
    }

    @Override
    public void destroy() {

    }
}

前端修改ajax请求

修改datatype="jsonp";

$.ajax({
    	async:false,
    	url:"http://localhost:8080/sanji/proname",
    	data:{id:pcode},
    	type:"GET",
    	dataType:"jsonp",
    	jsonp:'callback', 
    	jsonpCallback:"successCallback",  
    	success:function(result)
    	{
    		console.log('success2');
    		var str = "<option value = '001'>001</option>";
    		for(var i=0;i<result.length;i++)
    		{
    			str = str+"<option value = '"+result[i]+"'>"+result[i]+"</option>";
    		}
    		$("#sheng").html(str);
    	},
    	error: function(result) {
    		console.log("获取省份失败");
    		var str = "<option value = '001'>001</option>";
    		console.log(result);
    		for(var i=0;i<result.length;i++)
    		{
    			console.log(result.length);
    			str = str+"<option value = '"+result[i]+"'>"+result[i]+"</option>";
    		}
    		$("#sheng").html(str);
    	}
    });


        // 后端修改返回String，在前面添加successCallback（"+ 返回的数据 +"）
        Gson gson = new Gson();
        String json = gson.toJson(provinceNameList);
        return "successCallback(" + json + ")";

以上就能解决ajax跨域，请求成功但是不会成功显示的问题。