解决跨域目前主流的解决方案

产生跨域：主要是同源策略的问题，即不同协议、不同域名、不同的端口号以及域名和ip地址的访问都会产生跨域。

一、是jsonp

$.ajax({
  url: 'https://douban.uieee.com/v2/comming_soon',
  type: 'get',
  dataType: 'jsonp',
  data: { id: 1 },
  beforeSend: function (xhr) {
    console.log('before send')
  },
  success: function (data) {
    console.log(data)
  },
  error: function (xhr) {
    console.log(xhr)
  },
  complete: function (xhr) {
    console.log('request completed')
  }
})

它是通过动态创建script标签请求后端接口地址，然后传递callback参数，后端接收callback，后端经过数据处理，返回callback函数调用的形式、callback中的参数就是json。

二、通过代理的方式（ 前端代理和后端代理 ）

 proxy: {
            '/api': {
                target: 'http://192.168.2.90:3000',//后端接口地址
                changeOrigin: true,//是否允许跨越
                pathRewrite: {
                    '^/api': '/api'//重写,
                }
            }
        }

前端代理在vue中的vue.config.js里面配置一个proxy，里面有target属性指向跨域链接，修改完重启项目即可，实际上就是启动了一个代理服务器，绕开了同源策略，在请求的时候，通过代理服务器获取到数据在转给浏览器

如果是vite下的项目的话

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:5000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
    }
  }
})

三、CORS

CORS全称叫跨域资源共享，主要是后台工程师设置后端代码来达到前端跨域技术。

现在主流的框架的跨域都是以代理和CORS实现的