你需要知道的解决跨域的方案

待我称王封你为后i 2022-12-05 10:27 113阅读 0赞

今天我们再来分享一下关于跨域的问题，虽然之前也有分享过，但是解决方案不太全，且最近在面试的过程中，跨域是一个经典问题，所以我们需要知道其中的原理。

--------------------

# 什么是跨域 #

跨域是浏览器的同源策略导致的。

## 什么是同源策略呢？ ##

> 同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。

## 如何算同源呢？ ##

当协议、域名、端口都相同时才算同源。举例如下：

> http://www.hpp.com/hao.js  
> http://www.hpp.com/ao.js

跨域就是访问了不同源的界面，就会出现跨域了，报错信息如下：

![在这里插入图片描述][20200909211521199.png_pic_center]

--------------------

# 解决跨域的方案 #

## 1.CORS（后端） ##

> CORS（Cross Origin Resource Sharing 跨域资源共享），使用额外的HTTP头来告诉浏览器，让运行在一个origin上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或者端口请求一个资源时，资源会发起一个跨域HTTP请求。

我们先来看一下`Node`中的`CORS`的解决代码：

app.use(async (ctx, next) => { 
      ctx.set("Access-Control-Allow-Origin", ctx.headers.origin);
      ctx.set("Access-Control-Allow-Credentials", true);
      ctx.set("Access-Control-Request-Method", "PUT,POST,GET,DELETE,OPTIONS");
      ctx.set(
        "Access-Control-Allow-Headers",
        "Origin, X-Requested-With, Content-Type, Accept"
      );
      if (ctx.method === "OPTIONS") { 
        ctx.status = 204;
        return;
      }
      await next();
    });

浏览器将`CORS`请求分为两类，简单请求和非简单请求。

**什么是简单请求呢？** 需要同时满足以下条件：

> 1）请求方法是HEAD、GET、POST  
> 2）HTTP的头信息不超出以下几种字段：  
> ①Accept  
> ②Accept-Language  
> ③Content-Language  
> ④Last-Event-ID  
> ⑤Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

简单请求不会触发`CORS`的预检请求，直接发出`CORS`请求。

**什么是非简单请求呢？**

非简单请求是对服务器有特殊要求的请求，比如请求方法是`PUT`或`DELETE`，或者`Content-Type`是`application/json`。非简单请求的`CORS`请求，会在正式通信之前，增加一次`HTTP`查询请求，称为预检请求。预检请求用的请求方法是`OPTIONS`，表示这个请求是用来询问的。当预检请求通过之后，浏览器才会发出正式的`CORS`请求。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70]

## 2.Node正向代理（前端） ##

代理的思路是，利用服务器端请求不会跨域的特性，让接口和当前站点同域。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 1]

解决方式如下：

在根目录下新建一个`vue.config.js`文件，里面添加如下代码：

module.exports = { 
        devServer: { 
            open: true,
            proxy: { 
            	'/auth-web': { 
            		target: 'https://132456.com/'
            	}
        	}
    	}
    }

这样，当请求的路径中含有`auth-web`时，会请求目标地址`https://132456.com/`

## 3.Nginx反向代理（运维） ##

主要是项目上线时在`Nginx`上做的配置  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 2]

添加如下代码：

server { 
       location /api { 
           proxy_pass http://localhost:8080;
       }
    }

这样，当请求的路径中含有`api`时，会请求目标地址`http://localhost:8080`

## 4.WebSocket协议 ##

`WebSocket`协议可在网络浏览器和服务器之间建立“套接字”连接。简单的说：客户端和服务器之间存在持久的连接，而且双方都可以随时开始发送数据，这种方式本质上没有使用`HTTP`，因此也没有跨域的限制。关于使用方式可以参考：  
[https://www.cnblogs.com/helen9822/p/11793328.html][https_www.cnblogs.com_helen9822_p_11793328.html]

## 5.JSONP ##

`JSONP`主要是利用了`script`标签没有跨域限制这个漏洞来完成的，但是只支持GET方法，而且前后端都需要进行设置。

# 参考链接 #

[https://blog.csdn.net/m0\_37508531/article/details/104878546][https_blog.csdn.net_m0_37508531_article_details_104878546]  
[http://www.ruanyifeng.com/blog/2016/04/cors.html][http_www.ruanyifeng.com_blog_2016_04_cors.html]

[20200909211521199.png_pic_center]: /images/20221123/3206c87e077646d5b859b94ca659012b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70]: /images/20221123/8504cb952dd446fc8df3f35cb2b15d56.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 1]: /images/20221123/a46fc2fa78874e4496043ede765a5fb7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 2]: /images/20221123/554387c9ff254ef39e3723bb9603cace.png
[https_www.cnblogs.com_helen9822_p_11793328.html]: https://www.cnblogs.com/helen9822/p/11793328.html
[https_blog.csdn.net_m0_37508531_article_details_104878546]: https://blog.csdn.net/m0_37508531/article/details/104878546
[http_www.ruanyifeng.com_blog_2016_04_cors.html]: http://www.ruanyifeng.com/blog/2016/04/cors.html