首先，跨域问题的控制台报错如下：
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文件中添加如下代码：
proxy: {
'/api': {
target: '', // 后台服务地址
ws: true,
changeOrigin: true, //是否跨域
rewrite: (path) => path.replace(/^\/api/, '')
}
},
要写在server的配置中
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（若原本项目中没有，就自己新建一个）文件中添加配置。
proxy: {
'/api': {
target: '', // 后台服务地址
ws: true,
changeOrigin: true, //是否跨域
pathRewrite: {
'^/api': '/' }
}
},
