React +Vite +yarn 本地跨域处理

常见的react跨域方法

react的跨域，网上找了好多的方法，基本都如下所见，大差不差
1、下载 http-proxy-middleware
2、npm i http-proxy-middleware
3、在src目录下新建一个setupProxy.js文件写入以下代码

const proxy = require('http-proxy-middleware')

module.exports = function(app) {
	app.use(proxy('/api', {
	target: 'http://localhost:4000',
	changeOrigin: true,
	pathRewrite: {'^/api': '' }
	}))
}

不知道是不是构建框架的原因（我用的Vite），这个文件根本就不执行，找了好久踩了很多坑之后也慢慢的试了出来，真的是会的都不难，难的都不会。看以下的react+vite的解决本地跨域方法
直接在vite.config.js文件中添加以下代码，如果没有这个文件，直接在根目录新建一个，不过作为vite的基本配置文件基本都是有的。

React +Vite +yarn 本地跨域处理

一、修改vite.config.js文件

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

export default defineConfig({
  plugins: [react()],
  server: {
    host: '0.0.0.0',//使用当前的IP地址，没有这个就是以localhost作为本地地址
    port: 3000, //端口号为3000
    open: false, //是否在默认浏览器中自动打开该地址
    proxy: { //使用代理
      '/api': { //当有 /api开头的地址是，代理到target地址
        target: 'http://127.0.0.1:8080', // 需要跨域代理的本地路径
        changeOrigin: true, //是否改变请求源头
        rewrite: (path) => path.replace(/^\/api/, '') // 路径重写
      }
    }
  }
})

这个文件修改后会直接更改配置，不用重新启动项目也可以得到结果。

二、使用跨域的url

写在最后（小坑）

在使用了以上方法后，我们可以在开发环境下进行跨域请求数据，但是这里还是会留下一个小坑（应该是大坑）。vite打包后的文件，会无法跨域，而且一些打包后一些本地图片也无法使用，这个应该是我在使用vite构建工具时前期没有想到的，因此在开发环境下我们可以使用vite.config.js进行跨域，但是在打包时我们需要使用webpack进行打包，这个时候，react又需要进行重新跨域。因此我也建议可以使用我写在文章开头的 常见的react跨域方法试试。本次react跨域相关的总结就到这里。感谢您的观看