React +Vite +yarn 本地跨域处理

怼烎@ 2024-05-04 08:14 9阅读 0赞

### 常见的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 #####

![在这里插入图片描述][ee21717a62b34fc38bac0ed0a7a8502e.png]

### 写在最后（小坑） ###

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

[ee21717a62b34fc38bac0ed0a7a8502e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/04/80625a3faa2146e7a0b662e1e5e40f83.png