Cross-domain problem (has been blocked by CORS policy:Response...) Causes and solutions

Reference: https://www.cnblogs.com/wyw0905/p/14990707.html

front-end error

has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

What is CORS

The full name of CORS is Cross-Origin Resource Sharing (Cross-Origin Resource Sharing) is a way of AJAX cross-origin request resources

Solution

1. Solve cross-domain problems in vue development stage

Development stage: in vue.config.js

module.exports = {
    
    
  dev: {
    
    
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
    
     // 配置跨域
    '/api':{
    
    
        target:`http://www.baidu.com`, //请求后台接口
        changeOrigin:true, // 允许跨域
        pathRewrite:{
    
    
            '^/api' : '' // 重写请求
        }
    }
  },
}

2. JSONP solution

Jsonp (JSON with Padding) A "use mode" of json that allows web pages to obtain data from other domain names (websites), that is, to read data across domains.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<div id="textID"></div>
<script type="text/javascript">
  /**
   * 实现jsonp
   * 1.创建script的标签
   * 2.拼接 url
   * 3.赋值url
   * 4.放入头部
  */
  function text_jsonp(req){
    
    
    var script = document.createElement('script');
    var url = req.url + '?callback=' + req.callback.name;
    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
  }
</script>
</body>
</html>

3. CORS (Cross-Origin Resource Sharing)

CORS is cross-origin resource sharing (Cross-Origin Resource Sharing), which uses ajax to request resources across domains. It supports modern browsers and IE supports more than 10. In a CORS request, the header information contains the following three fields:

Access-Control-Allow-Origin : This field is required. Its value is either the value of the Origin field at the time of the request, or a *, indicating that requests for any domain name are accepted;
Access-Control-Allow-Credentials : Optional, the value is a boolean value, indicating whether to allow cookies to be sent. By default, cookies are not included in CORS requests. If set to true, it means that the server explicitly allows the cookie to be included in the request and sent to the server together. This value can also only be set to true. 如果要发送Cookie，Access-Control-Allow-Origin必须为指定明确的、与请求网页一致的域名;
Access-Control-Expose-Headers : Optional. XMLHttpRequestThe method of the object during CORS request getResponseHeader()can only get 6 basic fields: Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma. If you want to get other fields, you must specify them in Access-Control-Expose-Headers.

For a detailed explanation, please see: CORS Detailed Explanation

Fourth, iframe realizes cross-domain

insert image description here

iframe(src){
    
    
  //数组
  if(Array.isArray(src)){
    
    
      this.docs.visible = true;
  }else{
    
    
      this.docs.visible = false;
      
  }
  this.link  = src
  if(this.docs.visible == false){
    
    
      if(this.$refs['ruleIframe'] && this.$refs['ruleIframe'].querySelector('iframe')){
    
    
          this.$refs['ruleIframe'].querySelector('iframe').remove()    //删除自身
      }
      var iframe = document.createElement('iframe');
      iframe.width = '100%';
      iframe.height = '100%';
      iframe.setAttribute('frameborder','0')
      iframe.src = src;                
      this.append(iframe)
  }
  
},
//创建元素 防止  获取不到 ruleIframe 递归
append(iframe){
    
    
  if(this.$refs['ruleIframe']){
    
    
      this.$refs['ruleIframe'].appendChild(iframe);
      return
  }
  setTimeout(()=>{
    
    
      this.append(iframe);
  },500)    
}