クロスドメインプロキシソリューション

なぜクロスドメインなのか

理由:ブラウザーは同一生成元ポリシーによって保護されており、リクエストを正常に送信するにはドメイン名ポートプロトコルが同じである必要があります。

たとえば、次の図

ただし、再度呼び出しを実行すると、localhost:9529、localhost:9530……スキャフォールディングサーバーのアドレスが変更されるため、ベースアドレスをlocalhost:9528に直接変更することはできません。
したがって、このベースアドレスには書き込むことはできません。！！

解決策:

ベースアドレスが書かれている場所に移動し、パスを/apiに変更します。これにより、スキャフォールディングサーバーのアドレスがどのように変更されても、「/api」は相対パスであるため、ベースアドレスに接続されます

此时基地址已经做了环境变量处理

/* 这是 封装基地址 */
const _axios = axios.create({
  baseURL: process.env.VUE_APP_URL
})



/* 这是 环境变量中的 写法   记得配置环境变量 .env文件*/
VUE_APP_URL = '/api'

ベースアドレスを設定すると、上の図の最初の行が機能するようになります。
次に、リクエストするベースアドレスが localhost:3000 であることをスキャフォールディングサーバーに伝える必要があります。

ステップ 1 : vue.config.js ファイルで devServer を見つけて、その中にプロキシ (プロキシ) を書き込みます。次に、/api を処理する必要があります。それが /api である限り、私たちは api として動作し始めます。プロキシですが、必ずしも /api である必要はありません。状況を自分で処理してください

devServer  在他里面写上 代理(proxy


devServer: {
    // 开发环境服务器配制
    port: 1234, // 端口号
    open: true, // 自动打开浏览器
    overlay: {
      warnings: false,
      errors: true
    },
  /* proxy是代理 */
    proxy: {
    /* 你的基地址后面不一定是 /api 所以看情况写 */
    '/api':{  
    target: 'localhost:3000/api'   //原本的基地址是 localhost:3000/api 
    /* 内部规则：用target+/api（代理的值） 作用最终基地址 */
    pathrewrite:{  /* 这个方法是 不让他拼接 不让上面的内部规则执行 所以最终的基地址就是 http://localhost:3000/api */
      '^/api': ''  //这里的意思就是 将/api改为空  就可以去掉一个/api了  
    }
  }
    }
    // before: require('./mock/mock-server.js')
  },

このとき、上の全体図の 2 行目も通過しますが、このとき 3 行目と 4 行目はクロスドメイン問題を解決するために自動的に戻ります。

構成を変更した後にスキャフォールディングを再起動するための温かいリマインダー

高度なクロスドメインプロキシソリューション

上記の前提条件は、インターフェースが正常に呼び出せるときに「/api」を書き換えずにprocess.env.VUE_APP_URLに書き込む方法です。? そして、k 名前付き変数の値をオブジェクトに追加する方法

错误写法！！！！！

devServer: {
    // 开发环境服务器配制
    port: 1234, // 端口号
    open: true, // 自动打开浏览器
    overlay: {
      warnings: false,
      errors: true
    },
  /* proxy是代理 */
    proxy:{
  'process.env.VUE_APP_URL':{     如果是这样的话  是不可以的 因为他属于字符串了  这样写是错误的❌
    target: 'localhost:3000/api'   
    pathrewrite:{
      '^/api': ''  //这里的意思就是 将/api改为空  就可以去掉一个/api了  
    }
  }
}
    // before: require('./mock/mock-server.js')
  },

正确写法！！！！

一个对象内  想要加入一个 变量的值
  第一种写法：---> obj:{}中  想要加入 let a = 1--->  obj[a] = 1 --->  打印obj--->{ a:1 }
  第二种写法：--->obj2:{} 中加入 let a2 = 2---> obj2= { [a2]:2 }

devServer: {
    // 开发环境服务器配制
    port: 1234, // 端口号
    open: true, // 自动打开浏览器
    overlay: {
      warnings: false,
      errors: true
    },
  /* proxy是代理 */
    proxy:{
  [process.env.VUE_APP_URL]:{     
    target: process.env.VUE_APP_TARGET    //这里也可以用变量 去到对应的环境变量中设置一个新的基地址比如 VUE_APP_TARGET = 'localhost:3000/api'
    pathrewrite:{
      ['^'+ process.env.VUE_APP_URL]: ''  //这里的意思就是 将/api改为空  就可以去掉一个/api了  
    }
  }
}
  },

高度なライティングの利点は何ですか? 利点は、将来、対応する .env ファイル内で直接変更できることです。あちこち変更する必要はありません。

可写 可 不写   简化代码的作用


如果下面 不写  pathrewrite 这个对象  我们需要做些什么？？
 proxy:{
  [process.env.VUE_APP_URL]:{     
    target: process.env.VUE_APP_TARGET    //这里也可以用变量 去到对应的环境变量中设置一个新的基地址比如 VUE_APP_TARGET = 'localhost:3000/api'
  }
}

首先 搞清楚 target的内部规则是 将代理的值和 target做拼接 也就是  
  target: process.env.VUE_APP_TARGET 拼接 [process.env.VUE_APP_URL]
所以我们要做的是
  一： 去.env文件中  将基地址改为 你代理的值 例如---> VUE_APP_URL = '/api'--这样就可以直接拼接上去了
  二： 在.env文件中  将新设置的基地址 VUE_APP_TARGET = 'http://localhost:3000' 去掉/api
       这样就可以 最后只加一个 代理值了

クロスドメイン プロキシ ソリューション

なぜクロスドメインなのか

解決策:

高度なクロスドメイン プロキシ ソリューション

おすすめ

クロスドメインプロキシソリューション

高度なクロスドメインプロキシソリューション