React 跨域配置

最新推荐文章于 2024-07-12 16:03:06 发布

死神萝莉

最新推荐文章于 2024-07-12 16:03:06 发布

阅读量428

点赞数

分类专栏：疑难杂症文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/u010741500/article/details/129994620

版权

疑难杂症专栏收录该内容

15 篇文章 2 订阅

订阅专栏

本文介绍了如何在Vite配置文件中设置代理，以解决React应用中跨域问题，目标URL设为http://47.120.14.63:8081，并重写了请求路径。同时，文章还展示了如何修改Axios封装，将API基础URL设置为/api，以便与代理配置配合使用。示例代码中包含了一个使用AntdUpload组件的片段。

摘要由CSDN通过智能技术生成

vite+React+antd

配置代理

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': {
        target: 'http://47.120.14.63:8081', //目标url
        changeOrigin: true, //支持跨域
        rewrite: (path) => path.replace(/^\/api/, ""), 
          //重写路径,替换/api
      }
    }
  }
})

修改axios封装

//request.js
import axios from "axios";

let request = axios.create({
    // baseURL: "http://47.120.14.63:8081",
    baseURL: "/api",
    timeout: 3000
})

例如:

<Upload 
          action="/api/file/upload" 
          listType="picture-card" 
          name="multipartFile"
          onChange={uploadChange}>
</Upload>