前端项目开发中的跨域代理

项目开发中如何跨域

Vue 项目的代理设置

vue.config.js

module.exports = {
  devServer: {
    proxy: {
      "/api": {
        //这里最好有一个 /
        target: "https://rob.megameta.cn", // 后台接口域名
        secure: false, // 如果是https接口，需要配置这个参数
        changeOrigin: true, //是否跨域
        pathRewrite: {
          "^/api": ""
        }
      }
    }
  }
};

React 项目中的代理设置

src/setupProxy.js

const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function (app) {
  app.use(
    createProxyMiddleware("/api", {
      target: "https://wechat.megameta.cn/archives/",
      changeOrigin: true,
      pathRewrite: {
        "^/api": "",
      },
    }),
    createProxyMiddleware("/agent", {
      target: "https://wechat.megameta.cn/consumer/",
      changeOrigin: true,
      pathRewrite: {
        "^/agent": "",
      },
    })
  );
};