vueとphpが連携し、開発環境が一致しない問題?
1614 ワード
vue開発、npm run devはlocalhost:8080
php自体は別のローカルサイトです
2つは同じドメインではなく、元のすべてのリクエストがクッキーを携帯するモードを使用していません.axiosがheadersにtokenを追加する方法を使用しています.毎回phpを要求するインタフェースはドメイン間に相当し、いずれかのgetまたはpostは、いつも2回の要求(1回目はOPTIONS、2回目は正式)が面倒です.もちろんフロントエンドプロジェクトの発表後、phpサイトの下にコピーするのは、同ドメインであり、この問題はありません.しかし、開発環境が異なるドメインでは、どのようにして便利に統一開発することができますか?
解決策:
vuejs-templateはとっくにこの問題を考慮しており、解決策はバックグラウンドにアクセスする必要がある要求をフロントエンドのdev serverを通じてバックグラウンドサーバに転送することであり、このようにすべての要求が要求のフロントエンド開発サーバであり、ドメイン間の問題は存在しない.vue-cliでフロントエンドを構築している場合はconfig/indexを直接変更します.js、proxyTableを設定すればいいです.
php自体は別のローカルサイトです
2つは同じドメインではなく、元のすべてのリクエストがクッキーを携帯するモードを使用していません.axiosがheadersにtokenを追加する方法を使用しています.毎回phpを要求するインタフェースはドメイン間に相当し、いずれかのgetまたはpostは、いつも2回の要求(1回目はOPTIONS、2回目は正式)が面倒です.もちろんフロントエンドプロジェクトの発表後、phpサイトの下にコピーするのは、同ドメインであり、この問題はありません.しかし、開発環境が異なるドメインでは、どのようにして便利に統一開発することができますか?
解決策:
vuejs-templateはとっくにこの問題を考慮しており、解決策はバックグラウンドにアクセスする必要がある要求をフロントエンドのdev serverを通じてバックグラウンドサーバに転送することであり、このようにすべての要求が要求のフロントエンド開発サーバであり、ドメイン間の問題は存在しない.vue-cliでフロントエンドを構築している場合はconfig/indexを直接変更します.js、proxyTableを設定すればいいです.
// config/index.js
module.exports = {
// ...
dev: {
proxyTable: {
// proxy all requests starting with /api to jsonplaceholder
'/api': {
target: 'http://jsonplaceholder.typicode.com',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}
出典:https://segmentfault.com/q/1010000010387618