前端解决跨域的几种方式

https://www.cnblogs.com/2050/p/3191744.html
参考

1、 通过jsonp跨域
JSONP 只支持GET请求
JSONP 的优势在于支持老式浏览器，以及可以向不支持 CORS 的网站请求数据。

2、 使用iframe解决跨域(以前的跨域方法)
​ 使用方法类似于jsonp格式的原生写法,也只能请求get方法

3.vue.config.js 中proxy配置

4.vite.config.js中proxy配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  base: './',
  plugins: [
    vue()
  ],
  // // 反向代理配置 - 可解决跨域问题
  server:{
    proxy: { 
      '/api': {
       target: "http://localhost/test5_tp/public/index.php/",
       changeOrigin: true,
       rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

5、postMessage解决iframe跨域通信问题

6、 跨域资源共享（CORS）

7、 nginx代理跨域
8、 nodejs中间件代理跨域
9、 WebSocket协议跨域
10 降域

跨域请求带cookie

前端请求时在request对象中配置"withCredentials": true；

服务端在response的header中配置"Access-Control-Allow-Origin", “http://xxx:${port}”;

服务端在response的header中配置"Access-Control-Allow-Credentials", “true”