前端跨域的三种方案

同源策略

        同源策略指浏览器会限制协议、域名、端口号不同的两个地址进行AJAX的方式请求。（只有在浏览器的环境中才会有这个限制，服务器和浏览器之间没有这个限制）

前端跨域的三种方案

1.JSONP（JSON with Padding）

JSONP是一种利用script进行跨域请求的技巧，其原因是script标签的src属性不受同源策略影响而实现的。（这种请求方式需要和后端进行配合返回一段js调用客户端的函数）

      const request = (res) => {
        console.log(res);
      };//在上面的这个函数进行接收
      const script = document.createElement("script");

      script.src ="https://example.com/test/jsonp?callback=request&name=123&age=18";
      //请求地址为 https://example.com/test/jsonp
      //后面为携带参数?callback=request&name=123&age=18
      document.body.appendChild(script);  //这句话表示发送请求

JSONP的问题

1. 需要后端进行配合返回一个一段js代码调用前端的函数。
2. 由于利用src进行接口请求，所以只能发送get请求，有参数限制大小的问题。
3. 不是一个真正的AJAX请求在控制台网络里面的Fetch/XHR里面看不到。

2.CROS（Cross Origin Resource Share）

        Cross Origin Resource Share，跨域资源共享，这种方式不用客户端做出任何变化客户端不需要修改代码，只要在被请求的服务器响应时添加一个AccessControl-Allow-Origin的响应头，表示这个资源允许被这个域访问。

        整个CROS通信过程，都是由浏览器完成，对于开发者来说就像是同域请求一样。

3.proxy代理

        本地开启代理服务器。请求由代理服务器发出这样就不受浏览器同源策略限制，服务器和服务器之间不涉及到跨域问题。

常见的代理方式

• 利用liveServer进行代理
• 在工程中利用webpack devserver进行代理

• nginx => nginx服务器代理

        使用vsCode的LiveServer进行跨域代理