http接口跨域解决方法

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/u010138906/article/details/78771121

方法一: JQuery+jsnop 跨域的例子

使用原因:JavaScript是一种在Web开发中经常使用的前端动态脚本技术。
在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略)。
这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,
即JavaScript只能访问与包含它的文档在同一域下的内容。  

方法一实现步骤:

1.ajax请求代码 必须是get方式

get方式

//使用jsonp 跨域访问   
    $.ajax({  
         type: "get",  
   
        url: "http://localhost:9090/example?callback=?",   
        beforeSend: function(XMLHttpRequest){  
            //ShowLoading();  
        },  
        data: {'name':'测试'}, //请求数据 
        dataType : "jsonp",  
   
        jsonp: 'callback',  // //传递给请求处理程序,用以获得jsonp回调函数名的参数名(默认为:callback)

        jsonpCallback:"callback",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名


        //成功获取跨域服务器上的json数据后,会动态执行这个callback函数
        success: function(json){  
             console.log(json);
        },  
        complete: function(XMLHttpRequest, textStatus){  
            //HideLoading();  
        },  
        error: function(){  
            //请求出错处理  
        }  
        });    

2.服务器端 业务处理,把处理结果写到输出流里 注意输出流中json串的写法


//服务器端接到回调函数名字输出回调函数,客户端根据回调函数进行解析取得函数中json对象      
    response.setContentType("text/html; charset=utf-8");      
    String callback=request.getParameter("callback");      
    PrintWriter writer = response.getWriter();      
    writer .print(callback+"([ { name:\"跨域访问成功!\"},{ name:\"跨域访问失败!\"}])"); 
3.


JSONP的优点是:它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制;它的兼容性更好,在更加古老的浏览器中都 可以运行,不需要XMLHttpRequest或ActiveX的支持;并且在请求完毕后可以通过调用callback的方式回传结果。

缺点:它只支持GET请求而不支持POST等其它类型的HTTP请求;它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

方法二:服务端(接口端处理方式)调用接口端可以不做处理

方法二实现步骤:

1.1、方式一。。。项目中添加一个下面的过滤器(1.1或者1.2 选择其中一个即可)

import org.springframework.stereotype.Component;

import javax.servlet.*;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 *
 *  跨域过滤器
 * @author sapphire
 * @version
 * @since 2016年12月19日
 */
@Component
public class CorsFilter implements Filter {

    final static org.slf4j.Logger logger = org.slf4j.LoggerFactory.getLogger(CorsFilter.class);

    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "GET");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
        chain.doFilter(req, res);
    }
    public void init(FilterConfig filterConfig) {}
    public void destroy() {}
} 

1.2、方式二。。。。项目中添加

/**
 * @author T-MacFBMa
 * @version V1.0.0
 * @Description Define collapse domain request access  定义垮域请求访问头
 * @date 2017/5/8
 */
@Configuration
public class CorsHeader {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurerAdapter() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                        .allowedOrigins("*")
                        .allowCredentials(true)
                        .allowedMethods("PUT", "DELETE", "POST", "GET")
//                        .allowedHeaders("header1", "header2", "header3")
//                        .exposedHeaders("header1", "header2")
                        .allowCredentials(false).maxAge(3600);
            }
        };
    }
}

1.3、方式三  :    添加注解

@CrossOrigin()

2.ajax 调用方式

$.ajax({
	cache: true,
	type: type,
	url:url,
	data:params,
	async: false,
	error: function(request) {
		console.log(request);
		layer.msg('接口错误', {
		icon: 6,
		shift: 6,    // 出现的动画效果
		time: 1500 //2秒关闭(如果不配置,默认是3秒)
	}, function(){
				//do something
	});

	},
	success: function(json) {

	func(json);
	}
});

综合两种方式的调用:灵活调用接口

@RequestMapping(value = "getSignature", method = RequestMethod.GET, produces = MediaType.APPLICATION_JSON_UTF8_VALUE)
public String getSignature(String path, String callback) {
    return Objects.isNull(callback) ? ja1.toString() : callback + "(" + ja1.toString() + ");";

}


更多解决方式,期待各位提供建议。


展开阅读全文

没有更多推荐了,返回首页