解决跨域问题

什么是跨域请求：触发了浏览器的同源策略的请求就叫跨域请求。

同源策略：1.是浏览器提供的安全措施。2.传输协议、域名、端口，有一个不一样就会触发同源策略。3.浏览器不允许接口服务端给的数据。

方法一：JSONP方法

原理：利用 后端script的src属性不受跨域影响的特点，直接在src属性中发起请求。

优点：简单，兼容性好。

缺点：仅支持get方法，具有局限性，不安全。

function jsonp(url, callback) {
  // 创建一个唯一的回调函数名
  const callbackName = 'jsonp_callback_' + Date.now();

  // 创建一个全局的回调函数
  window[callbackName] = function(data) {
    // 回调函数执行后，删除对应的全局回调函数和script标签
    delete window[callbackName];
    script.parentNode.removeChild(script);
    
    // 调用传入的回调函数，将数据传递给它
    callback(data);
  };

  // 创建一个script标签，并设置src属性以及回调函数名
  const script = document.createElement('script');
  script.src = url + '&callback=' + callbackName;

  // 将script标签添加到页面中
  document.head.appendChild(script);
}

// 使用示例
jsonp('https://api.example.com/data?param1=value1', function(data) {
  console.log(data);
});

 在这个例子中，jsonp函数接受一个URL和一个回调函数作为参数。它动态创建一个带有唯一回调函数名的<script>标签，并将URL和回调函数名作为查询参数添加到URL中。然后，它将该<script>标签添加到页面中，浏览器会自动发送请求并执行返回的JavaScript代码。返回的数据会作为回调函数的参数传递给回调函数，并在回调函数内部进行处理。

方法二：cors方法（根本解决方案）

主要由后端进行配置。

优点：支持所有类型的http请求方式，是跨域HTTP请求的根本解决方案。

缺点：低版本浏览器无法兼容。

方法三：proxy（代理）方法

原理：服务器之间发送请求没有跨域限制。

实现过程：1.先向同源服务器发送请求，同源服务器收到请求后项真实服务器发起请求。

2.真实服务器收到请求，返回响应同源服务器。

3.同源服务器返回数据给前端。

注意：同源服务器项真实服务器发送请求主要使用的是axios包。

以上就是几个解决跨域问题的方案。