vueでのドメイン間問題の解決

vueでのドメイン間問題の解決
(1).ドメイン間
ドメイン間:ブラウザの同源ポリシーのため、urlを要求するプロトコル、ドメイン名、ポートの3つの間のいずれかが現在のページアドレスと異なる場合はドメイン間です.ドメイン間の状況:
httpプロトコルなどのネットワークプロトコルは異なり、httpプロトコルはhttpプロトコルにアクセスします.
80ポートが8080ポートにアクセスするなど、ポートが異なります.
ドメイン名が異なります.例えばqianduanblog.comアクセスbaidu.com.
サブドメイン名はabc.のように異なります.qianduanblog.comアクセスdef.qianduanblog.com.
ドメイン名とドメイン名はipに対応し、例えばwww.a.comは20.205.28.90にアクセスする.
(2).vueでドメイン間の解決方法
方法1.バックグラウンド変更ヘッダー

header('Access-Control-Allow-Origin:*');//         
header('Access-Control-Allow-Method:POST,GET');//        

方法2.JQueryが提供するjsonpを使用

methods: { 
  getData () { 
    var self = this 
    $.ajax({ 
      url: 'http://f.apiplus.cn/bj11x5.json', 
      type: 'GET', 
      dataType: 'JSONP', 
      success: function (res) { 
        self.data = res.data.slice(0, 3) 
        self.opencode = res.data[0].opencode.split(',') 
      } 
    }) 
  }

方法3.http-proxy-middlewareエージェントを使用して(プロジェクトはvue-cli足場を使用して構築されます)要求url:"http://f.apiplus.cn/bj11x5.json”
1、config/indexを開く.jsは、proxyTableに次のコードを書きます.

proxyTable: { 
  '/api': {  //  "/api"   "http://f.apiplus.c" 
    target: 'http://f.apiplus.cn', //    
    changeOrigin: true, //    
    pathRewrite: { 
      '^/api': 'http://f.apiplus.cn' //     
      } 
  } 
}

2、axiosを使用してデータを要求する場合、直接「/api」を使用する.

getData () { 
 axios.get('/api/bj11x5.json', function (res) { 
   console.log(res) 
 })