(十三) - 跨域
协议, 域名, 端口, 有一个不同即为跨域.
一般情况下, 跨域的请求会被浏览器拦截:
创建服务端 NoCrossingOrigin.java: (服务器端口为: 8080)
@RestController @RequestMapping("/noOrigin") public class NoCrossingOrigin { @RequestMapping("/test1") public String test1(HttpSession session){ System.out.println("noOrigin被访问..."); System.out.println(session.getId()); return "You can! --noOrigin"; } }
创建客户端 test.html: (客户端端口为: 5500)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>TestCrossingOrigin</title> <script src="/jquery-3.3.1.js"></script> </head> <body> 访问没有添加跨域注解的handler: <input type="button" value="发送请求" onclick="test()"> <script> function test(){ console.log("发送test..."); $.ajax({ method: "get", url: "http://localhost:8080/noOrigin/test1", success: function(res){ console.log(res) } }) } </script> </body> </html>
访问结果:
可以看到, 前端的请求成功发送到了服务器, 但服务器返回的数据却被浏览器拦截了, 所以同源策略其实是浏览器拦截了服务器返回的数据, 请求还是能发到服务器的
如果要实现跨域请求, 则只需在服务端对该前端地址加白, 就能避免同源策略, 方法是在handler或controller前加上注解:
@CrossOrigin("地址"), 即可, 以上面的 NoCrossingOrigin.java 为例, 对其添加注解: (注意 127.0.0.1 和 localhost 是不一样的)
@RestController @RequestMapping("/noOrigin") @CrossOrigin("http://127.0.0.1:5500") public class NoCrossingOrigin { @RequestMapping("/test1") public String test1(HttpSession session){ System.out.println("noOrigin被访问..."); System.out.println(session.getId()); return "You can! --noOrigin"; } }
再次访问:
可以看到前端成功获取并展示了服务器返回的数据
此外, 通过测试发现, 跨域的请求, 每次请求的 session 的 id 都是不一样的, 所以要实现跨域获取(共用) session, 此法还不能满足, 需进一步处理(先留个坑..)
按照网上说的, 在 Ajax 中添加配置
xhrFields: {
withCredentials: true
},
在 handler 中添加配置
response.setHeader("Access-Control-Allow-Credentials", "true");
仍然无效~
