前后端分离项目中的跨域问题

叁歲伎倆 2022-04-24 00:04 389阅读 0赞

什么是跨域  
从A域名访问B域名时，只要两个URL的协议（http|https）、地址(localhost|127.0.0.1)、端口(8080|80801)中，有一个是不相同的， 那么我们就称此次请求为“跨域请求”

跨域问题的产生  
浏览器的同源策略禁止JavaScript的获取非本域名中的资源。 所以跨域是浏览器的行为， 服务端并不感知有没有跨域， 浏览器接收到服务端影响后检查响应头中的origin，和当前域名对比看是否为跨域请求， 如果为跨域则禁止操作。

跨域请求头、响应头的变化  
请求头多了“origin:当前域名” 的记录  
响应头多了"Access-Control-Allow-origin:允许跨域的域名"的记录

解决方案:

1.  cors
2.  nginx
3.  关闭浏览器的跨域限制(仅用于开发环境)

方式一：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, 注意: 以上参数需要和目标原有的内容之间需要有空格  
如下图:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoYW5nZXJ6aHVvXzMxOQ_size_16_color_FFFFFF_t_70]  
通过这个快捷键打开提示如下, 可认为配置成功, 然后再试下跨域问题  
![在这里插入图片描述][2021071621322398.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoYW5nZXJ6aHVvXzMxOQ_size_16_color_FFFFFF_t_70]: /images/20220222/48fb760baa0a4643a9b9d2a265aaf92b.png
[2021071621322398.png]: /images/20220222/7c71c33284ac4a8cb02a13d545a160bc.png