跨域的几种方式

 

1. CORS: 使用自定义的HTTP头部让浏览器与服务器进行沟通，通过XMLHttpRequest对象实现对CORS的支持。
   Origin：https://www.baidu.com
   如果服务器认为这个请求可以接受，就在Access－Control－Allow－Origin中回发相同的源信息（如果是公共资源，可以发回“＊”）
   例如：Access－Control－Allow－Origin：https://www.baidu.com

   Origin：https：／／www.baidu.com
   Access－Control－Request－Method： Post  ／／自身请求使用方法
   Access－Control－Request－Header：NCZ ／／自定义头部信息，多个，号分割
   
   Access-Control-Allow-Origin: https://www.baidu.com
   Access－Control－Allow－Method：Post //可以是多个 逗号隔开
   Access Control Allow Headers：允许的头部，多个逗号隔开
   Access－Control－Allow－Max－Age： 应该将这个Prefight请求缓存多长时间（秒）
   
   还有一个：
   Access－Control－Allow－Credentials：true ／／服务器接受带凭据的请求

   请求后，将按照时间缓存起来。第一次进行请求发送时，会多一次http请求，以下分别是后端代码：

   @Override
       public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
   
           HttpServletResponse response = (HttpServletResponse) servletResponse;
   
           response.setHeader("Access-Control-Allow-Origin", "*"); //解决跨域访问报错
           response.setHeader("Access-Control-Allow-Credentials","true");
           response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");
           response.setHeader("Access-Control-Max-Age", "3600"); //设置过期时间
           response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, client_id, uuid, Authorization");
           response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate"); // 支持HTTP 1.1.
           response.setHeader("Pragma", "no-cache"); // 支持HTTP 1.0. response.setHeader("Expires", "0");
   
           filterChain.doFilter(servletRequest, servletResponse);
   
       }

   
    
2. imgage图像Ping，只能get请求，用于浏览器与服务器之间的单向连接

   var img = new Image()
   img.onload = img.onerror = function(){
       alert('连接结束')
   }
   src＝“www.baidu.com/login?name='123'”

    

3. JSONP模式
   JSONP将访问跨域请求变成了执行远程JS代码，服务端不再返回JSON格式的数据，而是返回了一段将JSON数据作为传入参数［qrg］的函数［hh］执行代码

   function hh(qrg){
   console.log(qrg)
   }
   var script = document.createElement('script')
   script.src="https://mp.csdn.net/editor/html/109660640?callback=hh"
   document.body.insertBefore(script, document.body.firstChild)

   注：1安全问题，2用计时器来查看是否有返回，不能实时监听
    

4. Comet更高级的服务器推送，Ajax的升级版，实现方式为长轮询／流
    

5. Comet的SSE服务器发送事件，SSE通过常规http通信
    

6. Comet的WebSecket
   WebSecket是一种与服务器进行双全工／双向通信协议，拥有自定义协议／发送状态／open，error，close事件
    

7. PostMessage
    

8. nodejs中间件代理webpack.config.js  devServer.proxy
   
    

9. location.hash / window.name / document.domain + iframe的src

 

 

以上总结自：javascript字典手册page582

参考：JSONP https://blog.csdn.net/u011897301/article/details/52679486?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~all~sobaiduend~default-1-52679486.nonecase&utm_term=jsonp%E8%BF%94%E5%9B%9E%E7%9A%84%E6%98%AF%E4%BB%80%E4%B9%88%E6%95%B0%E6%8D%AE&spm=1000.2123.3001.4430