夸java_java跨越请求实例

什么是跨域

当两个域具有相同的协议(如http), 相同的端口(如80)，相同的host(如www.google.com)，那么我们就可以认为它们是相同的域(协议，域名，端口都必须相同)。

跨域就指着协议，域名，端口不一致，出于安全考虑，跨域的资源之间是无法交互的(例如一般情况跨域的JavaScript无法交互，当然有很多解决跨域的方案)

Spring 提供了三种方式:

CorsFilter 过滤器

 Bean

@CrossOrigin 注解

这三种方式，本质上都是用来配置 CorsConfiguration。

11.1 CorsFilter

首先，依赖 CorsFilter 创建自己的过滤器:

public class MyCorsFilter extendsCorsFilter {publicMyCorsFilter() {super(configurationSource());

}private staticUrlBasedCorsConfigurationSource configurationSource() {

UrlBasedCorsConfigurationSource source= newUrlBasedCorsConfigurationSource();

CorsConfiguration config= newCorsConfiguration();

config.setAllowedOrigins(Collections.singletonList("http://domain.com"));

config.setAllowCredentials(true);

CorsConfiguration config2= newCorsConfiguration();

config2.setAllowedOrigins(Collections.singletonList("http://domain.com"));

config2.setAllowCredentials(true);

source.registerCorsConfiguration("/**", config);

source.registerCorsConfiguration("/xxx", config2);returnsource;

}

}

然后，将其注册为一个过滤器即可。

11.2 

11.3 @CrossOrigin

//将跨域设置在类上，那么所有的 mapping 都会使用这个策略//如果不加参数，那么将会使用配置中的默认参数

@CrossOriginpublic classCORSController {public String cors(@RequestParam(defaultValue = "callback") String callback, HttpServletResponse response) {//最原始的方式，手动写请求头

response.setHeader("Access-Control-Allow-Origin", "http://192.168.163.1:8081");return callback + "('hello')";

}//将跨域设置在方法上

@RequestMapping("/cors")

@CrossOrigin(origins= {"http://localhost:8080", "http://remotehost:82323"},

methods={RequestMethod.GET, RequestMethod.POST},

allowedHeaders= {"Content-Type", "skfjksdjfk"},

allowCredentials= "true",

maxAge= 1898978)

@RequestMapping("/rrr")public String rrr(@RequestParam(defaultValue = "callback") String callback) {return callback + "('rrr')";

}

}

不使用注解模式：

packagecom.nf147.manage.controller;importorg.springframework.web.bind.annotation.RequestMapping;importorg.springframework.web.bind.annotation.RequestParam;importorg.springframework.web.bind.annotation.RestController;importjavax.servlet.http.HttpServletResponse;

@RestControllerpublic classCorsConstroller {

@RequestMapping("/cors")public String cors (@RequestParam(defaultValue = "callback") String callback, HttpServletResponse response) {

//使用Access-Control-Allow-Origin解决跨请求

response.setHeader("Access-Control-Allow-Origin", "http://169.---236.45:8080"); 注意这里要和本地服务器的url一致

return callback + "('hello')";

}

}

请求页面：

发送

fetch(url+ "/cors", {

method:'get',

}).then(resp=>resp.text())

.then(console.log);

}functionfasong232() {

$.ajax({

method:'get',

url: url+ "/cors",

dataType:'jsonp',

jsonpCallback:'hehehe',

jsonp:'xxxxxxxxxxxxxxxxxxxxxxx'}).done((data)=>{

console.log(3333333333333333, data);

}).fail((x, y, z)=>{

console.error(x, y, z);

})

}functionloadScript(src) {

const script= document.createElement('script');

script.src=src;

document.body.appendChild(script);

}functionfason2g() {if (window.confirm('是否发送?')) {

loadScript(`${url}/cors?callback=aaa`);

} else{

loadScript(`${url}/rrr?callback=bbb`);

}

}functionaaa(c) {

alert(c);

}functionbbb(c) {

console.log(c);

}functionfasong2() {if (window.confirm('是否发送?')) {

$.ajax({

method:'get',

url: url

}).done((data)=>{

console.log(data);

}).fail((x, y, z)=>{

console.error(x, y, z);

})

}

}

我这里是用node搭建了一个本地服务器

教程地址：https://www.cnblogs.com/nongzihong/p/10021033.html

效果演示：