你需要知道的解决跨域的方案-优快云博客

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

什么是跨域

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

什么是同源策略呢？

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

如何算同源呢？

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

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

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

在这里插入图片描述

解决跨域的方案

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请求。
在这里插入图片描述

2.Node正向代理（前端）

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

解决方式如下：

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

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

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

3.Nginx反向代理（运维）

主要是项目上线时在Nginx上做的配置
在这里插入图片描述

添加如下代码：

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

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

4.WebSocket协议

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