2017-07-17 3 views
1

私はVue CLIを使用してwebpack-dev-serverを使用してMac上でvue.js localyを使用してサイトを開発しています。 Vue Resourceを使用して、漠然としたVM(local.dev)でホストされているバックエンドからデータを取得したいと考えています。私はそうのように私のconfig/index.jsファイルにプロキシを追加しようとしました:WebPack&Vue.jsのVMへのプロキシが動作しない

proxyTable: { 
    '/pf': { 
    target: 'local.dev/portfolioVue/public', 
    secure: false, 
    changeOrigin: true, 
    pathRewrite: { 
     '^/pf': '' 
    } 
    } 
}, 

それから私は、SRC/App.vue

にマウント
mounted() { 
this.$http.get('/pf').then(response => { 
    console.log('tutu'); 
}, response => { 
    console.log('erreur'); 
}) 

}

でにこの機能を追加しました

Vue.http.headers.common['Access-Control-Allow-Origin'] = 'local.dev/portfolioVue/public'; 
Vue.http.headers.common['Access-Control-Request-Method'] = 'GET'; 

をこれはhttps://laracasts.com/discuss/channels/vue/cors-and-vuejs?page=1

上で見つかった:私は追加のsrc/main.jsの

しかし、今、私は取得していますこれらのエラー

Refused to set unsafe header "Access-Control-Request-Method" 


XMLHttpRequest cannot load http://local.dev/portfolioVue/public/. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9080' is therefore not allowed access. 
JSONを返す

私はsymply PHPファイル(パブリック/ index.phpを)を取得しようとしていますが、

<?php echo json_encode('tutu') ?> 

はそれがproblemeことができますVMの設定で?

ヘルプ

+0

は正しいプロパティ名は、代わりに '' proxyTable'のproxy'するべきではないでしょうか。 https://webpack.js.org/configuration/dev-server/#devserver-proxy私は非常に設定の例を取ることを提案し、実際に何かが起こっていることを見るために1つ以上の貼り付けをコピーします。これらの 'pfVue_2.0'のような名前も決して良い考えではありません。 –

+0

ご協力いただきありがとうございます。 しかし、このエラーが発生しました。 '' 'XMLHttpRequestはhttp://local.dev/portfolioVue/public/を読み込めません。プリフライト要求への応答がアクセス制御チェックを通過しない:要求されたリソースに「アクセス制御許可」がない。したがって、 'http:// localhost:9080'はアクセスが許可されていません。 '' ' 私は仕事へのアクセスをどのように得ることができるのか分かりません... –

+0

これはCORSの問題です。基本的には、あるドメインから別のドメインへのXHR要求をデフォルトで行うことはできません。私はWebpackのプロキシのプロパティに精通していないが、私はそれがあなたの設定を微調整することによって修正することができると推測しています。これは良いスタートかもしれません:https://webpack.github.io/docs/webpack-dev-server.html#proxying-local-virtual-hosts多分あなたの試行した設定を表示するためにあなたの質問を更新してください。 –

答えて

関連する問題