前端webpack、vite搭建的项目如何解决跨域

首先,跨域问题的控制台报错如下:

javascript 复制代码
Access to XMLHttpRequest at 'https://exsample.com/api/wx/haha/yaya' from origin 'http://localhost:5173' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

关键词 Access-Control-Allow-Origin

这样的报错就是跨域问题了。那么,在前端如何解决跨域呢?

可以配置反向代理服务器。

一、vite搭建的项目:

需在vite.config.ts文件中添加如下代码:

javascript 复制代码
 proxy: {
      '/api': {
        target: '', // 后台服务地址
        ws: true,
        changeOrigin: true, //是否跨域
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    },
复制代码
   要写在server的配置中 
javascript 复制代码
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path';
import postcsspxtoviewport from "postcss-px-to-viewport"

export default defineConfig({
  ...................
  server: {
    port: 5173,  //这是为了让vite搭建的项目也能在公网上运行
    host: "0.0.0.0",
    // 配置反向代理,解决跨域
    proxy: {
      '/api': {
        target: '', // 后台服务地址以及端口号
        ws: true,
        changeOrigin: true, //是否跨域
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    },
  },
  base: "/report-manager/"
.......................

})

二、webpack搭建的项目

需在config文件夹下面的webpackDevServer.config.ts(若原本项目中没有,就自己新建一个)文件中添加配置。

javascript 复制代码
 proxy: {
      '/api': {
          target: '', // 后台服务地址
          ws: true,
          changeOrigin: true, //是否跨域
          pathRewrite: { '^/api': '/' }
       }
    },
相关推荐
菜鸟una1 小时前
【微信小程序 + map组件】自定义地图气泡?原生气泡?如何抉择?
前端·vue.js·程序人生·微信小程序·小程序·typescript
fruge1 小时前
Node.js 入门与实战:从零构建用户管理系统
node.js
昔人'3 小时前
`list-style-type: decimal-leading-zero;`在有序列表`<ol></ol>` 中将零添加到一位数前面
前端·javascript·html
岁月宁静8 小时前
深度定制:在 Vue 3.5 应用中集成流式 AI 写作助手的实践
前端·vue.js·人工智能
心易行者9 小时前
10天!前端用coze,后端用Trae IDE+Claude Code从0开始构建到平台上线
前端
saadiya~9 小时前
ECharts 实时数据平滑更新实践(含 WebSocket 模拟)
前端·javascript·echarts
fruge9 小时前
前端三驾马车(HTML/CSS/JS)核心概念深度解析
前端·css·html
百锦再9 小时前
Vue Scoped样式混淆问题详解与解决方案
java·前端·javascript·数据库·vue.js·学习·.net
烛阴9 小时前
Lua 模块的完整入门指南
前端·lua
浪里行舟10 小时前
国产OCR双雄对决?PaddleOCR-VL与DeepSeek-OCR全面解析
前端·后端