解决跨域的几种方法

域名，协议，端口三个其中一个只要不同，就会出现跨域情况

如何解决跨域

• jsonp方式，基本原理是利用了HTML里script没有跨域限制，动态创建script标签，将src作为服务器地址，服务器callback接受返回一个参数，只能使用get请求

 function jsonp(url,data,callback){
      var script=document.createElement('script');
      document.body.appendChild(script);
      
      data=data||{};
      data.callback='cb'+new Date().getTime();
      window[data.callback]=callback;
      
      url+="?"+$.param(data);
      script.src=url;
      script.onload=function(){
          document.body.removeChild(script);
      }
  }
 /**
 * 方法说明：
 * jsonp(url,data,callback):
 * url：后台的url方法，无需加[?callback=?]封装方法里头已经做了处理。
 * data：请求参数
 * callback：回调函数
 */

• cors 设置 CORS 允许跨域资源共享，需服务端配置

{
  "Access-Control-Allow-Origin": "http://baidu.xxx.com" //可以指定地址
}

// 不推荐，等于所有网址都可以跨域
/*
* 后端需要存一个session，给前端返回一个cookie，如果跨域设置成*
号，则给前端不了cookie
*/
{
  "Access-Control-Allow-Origin": "*" //也可以使用通配符 任何地址都能访问 安全性不高
}

• 使用 vite proxy 或者node代理，webpack proxy

express 在本地创建一个服务

// 安装 npm i express

const express = require("express");
const app = express();

//创建get请求
app.get("/yx", (req, res) => {
  res.json({
    code: 200,
    message: "请求成功",
  });
});
//端口号9001
app.listen(9091, () => {
  console.log("监听端口9091");
});

// 使用 node 文件名  启动服务

• App.vue 调取端口 使用fetch方法

fetch('http://localhost:9091/yx')  // 不配置代理，会产生跨域，调用不了接口

// 配置代理后，使用/api/yx 调用
fetch('/api/yx')

• vite.config.ts 中配置代理，增加server

server:{
    // 只适用于 dev环境  线上环境需要 nginx 配置 proxy 进行代理
    proxy:{
      '/api':{
        target:'http://localhost:9091',
        rewrite:(path:any)=>path.replace(/^\/api/,'')  // 处理接口中api是否需要
      }
    }
  },