プロキシクロスドメインの詳細設定VUE-CLI3

コードの最初の古いルール、

// 在根目录下自行创建vue.config.js
module.exports = { // cli3 代理是从指定的target后面开始匹配的，不是任意位置；配置pathRewrite可以做替换 devServer: { port: '8080', open: true, proxy: { '/api': { // /api 的意义在于，声明axios中url已/api开头的请求都适用于该规则， // 注意是以/api开头，即：axios.post({url: '/api/xxx/xxx'}) target: '服务器真实地址', // 此处target的意义在于：造成跨域是因为访 // 问的host与我们的请求头里的origin不一致，所以我们要设置成一致，这个具体请看下文 changeOrigin: true, pathRewrite: {'^/api': 'https://我是服务器/api'} // 此处是大部分文章都不会明说的的地方， // 既然我们设置了代理，则所有请求url都已写成/api/xxx/xxx，那请求如何知道我们到底请求的是哪个服务器的数据呢 // 因此这里的意义在于， 以 /api开头的url请求，代理都会知道实际上应该请求那里， // ‘我是服务器/api’，后面的/api根据实际请求地址决定，即我的请求url：/api/test/test，被代理后请求的则是 // https://我是服务器/api/test/test } } } } 

演技は成功し、要求されています

 

マイクロ文字の画像_20191211182354.png

示されているように、あなたは、構成エージェントは、クロスドメインの問題を解決することができる理由ですURLとリクエストヘッダの起源は一貫しているホスト要求を、見ることができる
ホストがある私たちの起源を、一致していないされているため、クロスドメインリクエストURLが得られ、多くの場合、非相同、言った、プロキシを設定することにより、私の要求がからになった
192.168.1.109:8080からデータを要求し、それは非相同的に解決することである（これは私のローカルIPは、説明される）192.168.1.109:8080問題は、

人々トークモード

人々は言う：私はマシンに私のデータを取得するために、私は、もはや必要がクロスドメインを検討するように、我々は、代わりに私の母国、私の母国リクエストブローカーへのサーバーのデータバックのプロキシサーバに要求します

このように、

著者：_に示すように
リンクします。https：//www.jianshu.com/p/f002ae1c046f
出典：ジェーンの本が
著者によって著作権で保護されています。著者は認可商業転載してください接触、非商用の転載は、ソースを明記してください。

 

= module.exportsは{ 
  devserver：{ 
    プロキシ：{
       '/ API' ：{ 
        対象： 'HTTP：// localhostを：8001'、// 宛先アドレス--api経路 
        WS：trueに、// // WebSocketを有効にするかどうかを 
        changeOriginました：trueに、// プロキシを有効：ローカルの仮想サーバーを作成し、要求されたデータを送信し、データと同時に要求を受信したため、サーバーとサーバーのデータとの対話ということは、クロスドメインの問題はないだろう 
        '{：pathRewrite ^ / API '：' HTTP：// localhostを：8080 / API「} // ここに書き換えパス--vueポート
      } 
    } 
  } 
}