前端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': '/' }
       }
    },
相关推荐
江城开朗的豌豆1 分钟前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆2 分钟前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆2 分钟前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js
江城开朗的豌豆3 分钟前
Vue路由守卫全攻略:给页面访问装上'安检门'
前端·javascript·vue.js
小磊哥er10 分钟前
【前端工程化】前端组件模版构建那些事
前端
前端 贾公子11 分钟前
monorepo + Turborepo --- 开发应用程序
java·前端·javascript
江城开朗的豌豆15 分钟前
Vue路由传参避坑指南:params和query的那些猫腻
前端·javascript·vue.js
十里青山24 分钟前
超好用的vue图片预览插件更新啦,hevue-img-preview 7.0.0版本正式发布,支持vue2/vue3/移动/pc,增加缩略图、下载、自定义样式等
前端·javascript·vue.js
lichenyang45333 分钟前
css模块化以及rem布局
前端·javascript·css
小熊哥^--^34 分钟前
条件渲染 v-show与v-if
前端