前端常见的跨域解决方法

1.引入问题

1.1么是跨域？

跨域是指一个域下的文档或者脚本试图去请求另一个域下的资源，这里的跨域是广义的

1.2 广义的跨域

1）资源跳转：A链接、重定向、表当提交
2）资源嵌入：link标签、script标签、img标签、frame标签等dom标签等外链
3）脚本请求：js发起的ajax请求、dom和js对象的跨域操作等

1.3 侠义的跨域

我们所说的跨域是指侠义的跨域，使用浏览器同源策略限制的一种请求场景

1.4 什么是同源策略

同源策略也是浏览器最核心最安全的一种功能，如果浏览器缺少了同源策略，那么就很容易受到XSS，CSFR等攻击
所谓同源就是“协议+域名+端口”三者相同，只要有一个不同，那么就是非同源；
同源策略限制以下行为
1）当前域下的js脚本不能够访问其他域下的cookie、localStorage等
2）当前域下的js脚本不能访问操作另一个域下的DOM
3）无法发送ajax请求

2.跨域的解决方案

0.通过本地的HOST设置
1.通过jsonp跨域
2.通过document.domian+iframe
3.通过window.name+iframe跨域
4.通过localion.hash+iframe跨域
5.psotMessage跨域
5.跨域资源共享（CORS）
6.nginx代理跨域
7.nodejs中间代理跨域
8.webSocket协议跨域

2.1 通过本地的HOST设置实现跨域

当你前后端分来开发时，那么前端只需要在开发时请求到服务器的数据即可，而在真正部署的时候，是在同域下部署的，则不会产生跨域问题，那么前端开发者只需要改变本地的HOST配置即可，将本地的默认域映射到服务器的地址

2.2 通过jsonp跨域

通过jsonp跨域实质是动态创建script标签，可以在script标签中src属性下请求一个带参数的网址实现跨域通信

1. 原生实现

 <script>
    function handleResponse(res) {
    
    
      //处理response代码操作
      console.log(JSON.stringify(res))
    }
  </script>
  <script>
    window.onload = function () {
    
    
      var btn = document.getElementById("btn");
      btn.onclick = function () {
    
    
        var script = document.createElement('script');
        // script.type = "text/javascript"
        //传一个回调函数handleCallback给后端，方便后端返回时执行这个在前端定义的回调函数
        script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse"
        document.head.appendChild(script)
      }
    }

  </script>

服务器返回如下（返回时即是执行前端设置的回调函数handelCallback()


    handleCallback({
    
    "status":true,"name":"admin"})

2.jquery实现

在jQuety封装的$.ajax中有一个dataType属性，如果将该属性设置成“jsonp”，就能实现JSONP跨域了。

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script type="text/javascript">
  $(function () {
    
    
    $("#btn").click(function () {
    
    
      $.ajax({
    
    
        async: true,
        url: "https://api.douban.com/v2/book/search",
        type: "GET",
        json: 'callback',//指定一个查询参数名称来覆盖默认的
        dataType: 'jsonp',//返回的数据类型，设置JONP方式
        jsonpCallback: 'handleResponse',//设置回调函数名
        data: {
    
    
          q: "javascript",
          count: 1
        },
        success: function (response, status, xhr) {
    
    
          console.log('状态为：' + status + '状态是：' + xhr.statusText);
          console.log(response)
        }
      })
    })
  })
</script>

3. vue.js

   //vue.js
    this.$http.jsonp({
    
    
      params:{
    
    },
      jsonp:'handleCallback'
    }).then(
      (res)=>{
    
    
        console.log(res)
      }
    )

4. jsonp实现跨域总结

由于jsonp实现的跨域原理是动态尝试script标签，利用script标签的src不受同源策略的限制，但是使用jsonp的缺点是只能实现get请求，不能实现post请求；

2.3 资源共享跨域（CORS）

普通的跨域请求：（即get、post）
就是只要服务器配置即可，前端不需要配置，若需要携带cookie，那么前后端都需要配置（注意：这个cookie为跨域请求接口所在域的cookie）

1.前端设置：

1）使用的时原生ajax

//前端设置是否携带cookie
xhr.withCredentials=true

示例代码：

  var xhr=new XMLHttpRequest();
  //前端设置是否允许携带cookie
  xhr.open('get','http://www.domain2.com:8080/login',true)
  xhr.setRequestHeader('Content-type','appliction/x-www-form-urlencoded');
  xhr.onreadystatechange=function(){
    
    
    if(xhr.readyState!==){
    
    
      return;
    }
    else{
    
    
      if(xhr.status>=200&&xhr.status<300){
    
    
        console.log(xhr.responseText)
      }
    }
  }

2）使用vue框架

a) 可以使用axios设置：

axios.default.withCredentials=true;

vue-resource设置：

Vue.http.options.credentials=true

2.后端设置

1）Java后台示例

/*
 * 导入包：import javax.servlet.http.HttpServletResponse;
 * 接口参数中定义：HttpServletResponse response
 */

// 允许跨域访问的域名：若有端口需写全（协议+域名+端口），若没有端口末尾不用加'/'
response.setHeader("Access-Control-Allow-Origin", "http://www.domain1.com"); 

// 允许前端带认证cookie：启用此项后，上面的域名不能为'*'，必须指定具体的域名，否则浏览器会提示
response.setHeader("Access-Control-Allow-Credentials", "true"); 

// 提示OPTIONS预检时，后端需要设置的两个常用自定义头
response.setHeader("Access-Control-Allow-Headers", "Content-Type,X-Requested-With");

2）Nodejs后台示例

var http = require('http');
var server = http.createServer();
var qs = require('querystring');

server.on('request', function(req, res) {
    
    
    var postData = '';

    // 数据块接收中
    req.addListener('data', function(chunk) {
    
    
        postData += chunk;
    });

    // 数据接收完毕
    req.addListener('end', function() {
    
    
        postData = qs.parse(postData);

        // 跨域后台设置
        res.writeHead(200, {
    
    
            'Access-Control-Allow-Credentials': 'true',     // 后端允许发送Cookie
            'Access-Control-Allow-Origin': 'http://www.domain1.com',    // 允许访问的域（协议+域名+端口）
            /* 
             * 此处设置的cookie还是domain2的而非domain1，因为后端也不能跨域写cookie(nginx反向代理可以实现)，
             * 但只要domain2中写入一次cookie认证，后面的跨域接口都能从domain2中获取cookie，从而实现所有的接口都能跨域访问
             */
            'Set-Cookie': 'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly'  // HttpOnly的作用是让js无法读取cookie
        });

        res.write(JSON.stringify(postData));
        res.end();
    });
});

server.listen('8080');
console.log('Server is running at port 8080...');

总结：

后端配置Access-Control-Allow-Origin，来设置允许访问的域，或者配置*表示全部允许；
当有多个请求需要跨域时或者多台浏览器需要跨域反问时，那么此时只能配置为 *，但是此时带来的问题是，不能携带cookie
只有设置允许特定的源访问时，才能携带cookie

2.4 nginx反向代理实现跨域

具体使用参考：nginx反向代理接口跨域
使用nginx配置反向代理总结：
1）实现思路：通过配置一个代理服务器（域名与本地浏览器相同，这里举例为domain1，端口不同，比如本地浏览器端口为80，那么你可以配置81或者其他），这个代理服务器作为跳板机，反向代理访问服务器的接口（这里举例为domain2）
2）使用nginx配置反向代理实现跨域不需要服务器的配合，不过需要你搭建一个中转nginx服务器，用于转发请求；
3）使用nginx反向代理可以实现修改cookie中domian信息，方便当前域cookie写入，实现跨域登录

nginx具体配置

#proxy服务器
server {
    
    
   //端口号
    listen       81;
    //域名
    server_name  www.domain1.com;

    location / {
    
    
        proxy_pass   http://www.domain2.com:8080;  #反向代理
        proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名
        index  index.html index.htm;

        # 当用webpack-dev-server等中间件代理接口访问nignx时，此时无浏览器参与，故没有同源限制，下面的跨域配置可不启用
        add_header Access-Control-Allow-Origin http://www.domain1.com;  #当前端只跨域不带cookie时，可为*
        add_header Access-Control-Allow-Credentials true;
    }
}

在这里插入图片描述

前端代码示例

var xhr = new XMLHttpRequest();
// 前端开关：浏览器是否读写cookie
xhr.withCredentials = true;
// 访问nginx中的代理服务器
xhr.open('get', 'http://www.domain1.com:81/?user=admin', true);
xhr.send();

nodejs后端示例

var http = require('http');
var server = http.createServer();
var qs = require('querystring');

server.on('request', function(req, res) {
    
    
    var params = qs.parse(req.url.substring(2));

    // 向前台写cookie
    res.writeHead(200, {
    
    
        'Set-Cookie': 'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly'   // HttpOnly:脚本无法读取
    });

    res.write(JSON.stringify(params));
    res.end();
});

server.listen('8080');
console.log('Server is running at port 8080...');

2.5 Nodejs中间层代理跨域

2.4.4 vue框架中实现跨域

即是利用node+webpack+webpack-dev-server代理接口跨域，在开发环境中，由于vue的渲染服务和代理服务都是webpack-dev-server同一个，所以页面与代理之间不再跨域，无需设置headers跨域信息了；
使用vue脚手架搭建的项目，在项目的config目录下的index文件中进行代理配置
注意：只是用于生成环境
对于生成环境和开发环境中配置的代理实现跨域参考文章：
通过vue dev和nginx反向代理实现开发环境和生成环境跨域
https://www.cnblogs.com/wasbg/p/10973880.html
举例如下：

  proxyTable: {
    
    
      '/api': {
    
    //匹配所有以‘/api’开头的请求路径
        target: 'http://localhost:4000',//代理目标的基础路径（即后端的额接口地址）
        changeOrigin:true,//是否允许跨域
        pathRewrite:{
    
    
          //重写路径：去掉路径中开头的‘/api’
          '^/api':''//这个根根据真正的需求而定
        }
      }
    },

在这里插入图片描述
配置说明：

代理设置完成之后，会检查请求头是否与代理映射相符，不符合则不走代理；当匹配到映射路径时就会进入代理，并将target属性补全到请求路径
当我们遇到压迫访问多个接口时，我们可以为每个服务器配置不同的代理，以映射路径作为区分，比如所加的‘/api’是为了区分是否该路径是否向服务器发送异步请求，但是‘/api’并非真实存在与服务器的地址中的，因此我们需要利用pathRewrite属性对所映射的‘/api’/部分进行重写；
通俗的将就是当你需要向后端发送跨域请求时，那么根据不同的数据，肯定有不同的请求地址，若后端没有统一加某以标识符，那么在前端你可以自己所配置的代理匹配，然后再通过pathRewrite属性将你所加的‘/api’（并不是真实存在的）删除掉即还原真实的请求地址

2.6 使用WebSocket协议跨域

使用WebSocket协议，这个协议没有同源限制

参考文章：

https://segmentfault.com/a/1190000011145364