跨域问题

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

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

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

  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中间件代理

 

posted @ 2019-10-26 21:24  朵拉.科波菲尔  阅读(123)  评论(0)  编辑  收藏  举报