Vue和React配置解决跨域,proxy代理两步搞定

Vue配置:

第一步:
  • 找到 vite.config.js 文件 进行如下代码配置
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
export default defineConfig({
  plugins: [vue()],
  server: {
       /**
       * /api 是代理标识
       */
    proxy: { // 设置代理
      '/api': {
          target: 'https://www.baidu.com/', //要代理的地址
          changeOrigin: true,// 是否允许跨域
        /**
         * 重写路径
         * 如果不写rewrite 方法,那么api就会携带在请求路径上,同时导致请求地址不对报404
         * 由于我们正确的地址里面没有api的,所以说我们要在地址地址中删掉api
         * 以下代码就是把api替换成空,如果你项目代理名改变了,那么下面也要随之改变
         */
          rewrite: (path) => path.replace(/^\/api/, ""),
      }
    },
  },
});
第二步:写入项目代理名(我这里是写在我的api文件里面)

Vue和React配置解决跨域,proxy代理两步搞定_第1张图片

React配置:

一行代码搞定:找到 package.json 文件

Vue和React配置解决跨域,proxy代理两步搞定_第2张图片

你可能感兴趣的:(vue.js,react.js,前端)