转行小白历险记-2023.12.19 如何解决跨域问题

讨厌突如其来的破坏计划的感觉,真的好烦

一、跨域以及如何解决跨域问题(反向代理)

跨域

  1. 同源:协议、端口、域名相同

如何解决跨域问题

  1. jsonp:<script> 不受同源策略限制
  2. 跨源域资源共享 CORS:允许 Web 应用服务器进行跨源访问控制
  3. 使不同的源变成同源

什么时是反向代理

  1. 代理:请求转发
  2. 正向代理:客户端告诉代理服务器的地址
  3. 反向代理:客户端只需要告诉需要的东西

二、介绍 vite

由两个部分组成

  1. 开发服务器:基于ES模块提供丰富的内建功能
  2. 构建指令:使用Rollup 打包代码,提供预设配置

热更新:

  1. 修改的东西会立刻反应到页面上,叫做热更新

为什么选择vite

复制代码
  #### 启动本地开发服务器的时间会很久

  1. 依赖:使用**esbuild**进行依赖预打包,esbuild 使用 Go 编写,会比javascript-based 的打包工具快 10-100 倍
  2. 源码:使用**浏览器原生es module 提供源码**,让浏览器接管打包工具的部分工作
复制代码
  #### 热更新也会很慢

  1. 使用**ESM 不需要重新编译**:一些打包工具的开发服务器在文件更改时,需要重新构建整个项目,来获取新的模块依赖关系
  2. 使用**浏览器缓存加速** :Vite 利用**HTTP头**来加速整个页面的重新加载

三、使用vite配置请求代理

使用 Vite 或 Webpack Dev Server

在开发环境中,可以在 Vite 或 Webpack Dev Server 中配置反向代理:

javascript 复制代码
// Vite 配置示例
export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://backend.example.com', // 后端服务器地址
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      }
    }
  }
}
相关推荐
ElasticPDF-新国产PDF编辑器2 分钟前
React PDF Annotation plugin library online API examples
前端·react.js·pdf
爱看书的小沐25 分钟前
【小沐学Web3D】three.js 加载三维模型(React Three Fiber)
javascript·react.js·webgl·three.js·opengl·web3d·reactthreefiber
green5+11 小时前
LeetCode18四数之和
java·开发语言·算法
啊阿狸不会拉杆1 小时前
第二十五章:Python-pyecharts 库实现 3D 地图绘制
开发语言·python·地图
满怀10151 小时前
Python入门(8):文件
开发语言·python
pk_xz1234561 小时前
完整的Python程序,它能够根据两个Excel表格(假设在同一个Excel文件的不同sheet中)中的历史数据来预测未来G列数字
开发语言·python·excel
Bruce_Liuxiaowei1 小时前
构建macOS命令速查手册:基于Flask的轻量级Web应用实践
前端·macos·flask
Excuse_lighttime1 小时前
JAVA单例模式
java·开发语言·单例模式
冷琅辞1 小时前
Swift语言的跨平台开发
开发语言·后端·golang
独隅1 小时前
针对Ansible执行脚本时报错“可执行文件格式错误”,以下是详细的解决步骤和示例
运维·开发语言·ansible·lua·lua5.4