跨域问题

Posted 2021-03-24 vicky24k

跨域：一个域下的文档或脚本试图去请求另一个域下的资源，由浏览器同源策略限制的一类请求场景。

同源策略："协议+域名+端口"三者相同。

同源策略限制以下几种行为：

1. Cookie、LocalStorage 和 IndexDB 无法读取
2. DOM 和 Js对象无法获得
3. AJAX 请求不能发送

解决方案：

• 跨域资源共享（CORS）：服务端设置Access-Control-Allow-Origin；要带cookie请求，前端withCredentials=true，

 

服务端设置：

1 // 允许跨域访问的域名：若有端口需写全（协议+域名+端口），若没有端口末尾不用加‘/‘
2 response.setHeader("Access-Control-Allow-Origin", "http://www.domain1.com"); 
3 
4 // 允许前端带认证cookie：启用此项后，上面的域名不能为‘*‘，必须指定具体的域名，否则浏览器会提示
5 response.setHeader("Access-Control-Allow-Credentials", "true"); 
6 
7 // 提示OPTIONS预检时，后端需要设置的两个常用自定义头
8 response.setHeader("Access-Control-Allow-Headers", "Content-Type,X-Requested-With");

 

• jsonp：只能实现get一种请求
• iframe：仅限主域相同，子域不同的跨域应用场景postMessage：多窗口之间消息传递
  1. document.domain + iframe跨域
  2. location.hash + iframe
  3. window.name + iframe跨域
• WebSocket
• nginx代理（通过nginx配置一个代理服务器（域名与domain1相同，端口不同）做跳板机，反向代理访问domain2接口，并且可以顺便修改cookie中domain信息，方便当前域cookie写入，实现跨域登录）
• nodejs中间件代理