社区微信群开通啦，扫一扫抢先加入社区官方微信群
社区微信群
在前后分离的架构下，跨域问题难免会遇见比如，站点 http://domain-a.com 的某 HTML 页面通过 的 src 请求 http://domain-b.com/image.jpg。网络上的许多页面都会加载来自不同域的CSS样式表，图像和脚本等资源。
出于安全原因，浏览器限制从脚本内发起的跨源HTTP请求。 例如，XMLHttpRequest和Fetch API遵循同源策略。 这意味着使用这些API的Web应用程序只能从加载应用程序的同一个域请求HTTP资源，除非使用CORS头文件。
跨域的体现，在于它的域名不同或者端口不同，但要注意以下的形式为非跨域模式
http://www.example.com/index.html ==> http://www.example.com/login.html
当然这里虽然指SpringBoot但是SpringMVC也是一样的，要求在Spring4.2及以上的版本
@Target({ ElementType.METHOD, ElementType.TYPE })
@Retention(RetentionPolicy.RUNTIME)
@Documented
public @interface CrossOrigin {
String[] DEFAULT_ORIGINS = { "*" };
String[] DEFAULT_ALLOWED_HEADERS = { "*" };
boolean DEFAULT_ALLOW_CREDENTIALS = true;
long DEFAULT_MAX_AGE = 1800;
/**
* 同origins属性一样
*/
@AliasFor("origins")
String[] value() default {};
/**
* 所有支持域的集合，例如"http://domain1.com"。
* <p>这些值都显示在请求头中的Access-Control-Allow-Origin
* "*"代表所有域的请求都支持
* <p>如果没有定义，所有请求的域都支持
* @see #value
*/
@AliasFor("value")
String[] origins() default {};
/**
* 允许请求头重的header，默认都支持
*/
String[] allowedHeaders() default {};
/**
* 响应头中允许访问的header，默认为空
*/
String[] exposedHeaders() default {};
/**
* 请求支持的方法，例如"{RequestMethod.GET, RequestMethod.POST}"}。
* 默认支持RequestMapping中设置的方法
*/
RequestMethod[] methods() default {};
/**
* 是否允许cookie随请求发送，使用时必须指定具体的域
*/
String allowCredentials() default "";
/**
* 预请求的结果的有效期，默认30分钟
*/
long maxAge() default -1;
}Spring Boot下的请求处理控制器
package com.example.demo.controller;
import com.example.demo.domain.User;
import com.example.demo.service.IUserFind;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import javax.annotation.Resource;
/**
* @Title: UserController
* @ProjectName demo
* @Description: 请求处理控制器
* @author 浅然
* @date 2018/7/2022:18
**/
@RestController
//实现跨域注解
//origin="*"代表所有域名都可访问
//maxAge飞行前响应的缓存持续时间的最大年龄，简单来说就是Cookie的有效期 单位为秒
//若maxAge是负数,则代表为临时Cookie,不会被持久化,Cookie信息保存在浏览器内存中,浏览器关闭Cookie就消失
@CrossOrigin(origins = "*",maxAge = 3600)
public class UserController {
@Resource
private IUserFind userFind;
@GetMapping("finduser")
public User finduser(@RequestParam(value="id") Integer id){
//此处省略相应代码
}
}
后台返回的数据
前端跨域请求
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>demo</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
</head>
<body>
<input type="button" value="测试" onclick="ajaxloding()" />
<div id="usermessage"></div>
<script>
var getdata=0;
function ajaxloding(){
$.ajax({
async:false,
type:"get",
url:"http://localhost:8080/api/finduser?id=1",
contentType: "application/x-www-form-urlencoded",
dataType: "json",
data: {},
success:function(result){
getdata=result.name
},
error: function (errorMsg) {
//请求失败时执行该函数
alert("请求数据失败!");
}
});
$("#usermessage").text(getdata)
}
</script>
</body>
</html>这样就解决了跨域问题，获取了后台的数据
如果觉得我的文章对您有用，请随意打赏。你的支持将鼓励我继续创作！
