什么是跨域
从A域名访问B域名时,只要两个URL的协议(http|https)、地址(localhost|127.0.0.1)、端口(8080|80801)中,有一个是不相同的, 那么我们就称此次请求为“跨域请求”
跨域问题的产生
浏览器的同源策略禁止JavaScript的获取非本域名中的资源。 所以跨域是浏览器的行为, 服务端并不感知有没有跨域, 浏览器接收到服务端影响后检查响应头中的origin,和当前域名对比看是否为跨域请求, 如果为跨域则禁止操作。
跨域请求头、响应头的变化
请求头多了“origin:当前域名” 的记录
响应头多了"Access-Control-Allow-origin:允许跨域的域名"的记录
解决方案:
- cors
- nginx
- 关闭浏览器的跨域限制(仅用于开发环境)
方式一:cors方式解决跨域
cors方式解决跨域是HTML5提出的一种解决方案, 在服务器的响应头中添加Access-Control-Allow-origin, 以告诉浏览器哪些域名的跨域请求被允许。
例如,在Java拦截器中添加以下功能代码
// 设置允许跨域的域名
response.setHeader("Access-Control-Allow-Origin", "*"); // or 具体的域名 http://127.0.0.1
// 设置允许的请求头
response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS, HEAD"); // or *
// 设置最大缓存时间, 复杂请求,浏览器会先发送options请求, 可以换options请求结果的有效时间
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with, Content-Type, authorization"); // or *
// options请求
if (request.getMethod().equals("OPTIONS")) {
response.getWriter().print("options through");
return false;
}
方式二: nginx解决跨域
我们已经知道,跨域是浏览器的行为, 如果请求地址和响应地址是同一个,则很自然的解决了跨域问题。
方式三: 关闭浏览器的跨域限制
在浏览器快捷的属性后面添加配置 --disable-web-security --user-data-dir=C:\chromedata, 并创建目录C:\chromedata, 注意: 以上参数需要和目标原有的内容之间需要有空格
如下图:
通过这个快捷键打开提示如下, 可认为配置成功, 然后再试下跨域问题