跨域指浏览不能执行其他网站的脚本,由浏览器同源策略造成的。如果不解决跨域问题会导致无法向同源地址发送Ajax请求、Cookie、缓存等。
什么时候会出现跨域?
当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同,即为跨域。
当前页面 | 被请求页面 | 是否跨域 |
---|---|---|
http://xffjs.com | http://xffjs.com/xxx | 否 |
http://xffjs.com | https://xffjs.com | 是 |
http://xffjs.com | http://a.xffjs.com | 是 |
http://xffjs.com | http://xffjs.com:8080 | 是 |
跨域解决方式
通过Nginx配置解决
# ******解决跨域问题******
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Credentials 'true';
add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE;
add_header Access-Control-Allow-Headers *;
通过代码解决
跨域测试:
// 找一个网页打开控制台,输入以下代码即可
var xhr = new XMLHttpRequest();
xhr.open('GET', '自己的url');
xhr.send(null);
xhr.onload = function(e) {
var xhr = e.target;
console.log(xhr.responseText);
}
1、使用@CrossOrigin注解
/**
* 接口测试
*/
@CrossOrigin
@GetMapping("/test")
@ResponseBody
public ApiResult test() {
return ApiResult.success("请求成功!");
}
没加注解之前:
加上注解之后:
@CrossOrigin可以作用于方法和类上面。
2、全局跨域配置:
@Configuration
public class ResourcesConfig implements WebMvcConfigurer {
/**
* web跨域访问配置
*
* @param registry
*/
@Override
public void addCorsMappings(CorsRegistry registry) {
// 设置允许跨域的路径
registry.addMapping("/**")
// 设置允许跨域请求的域名
.allowedOrigins("*")
// 是否允许证书
.allowCredentials(true)
// 设置允许的方法
.allowedMethods("GET", "POST", "DELETE", "PUT")
// 设置允许的header属性
.allowedHeaders("*")
// 跨域允许时间 单位秒
.maxAge(3600);
}
}
打赏
当前共有 0 条评论