vue-cli+axios リクエストとクロスドメイン実装手順の詳細な説明-jsチュートリアル-php.cn

今回は、vue-cli+axios リクエストとクロスドメイン実装の手順について詳しく説明します。 vue-cli+axios リクエストとクロスドメイン実装の注意事項とは何か。、見てみましょう。

axiosをインストールします

cnpm install axios --save

ログイン後にコピー

axiosを使用したいファイルにaxiosを導入します

main.js文件 :import axios from 'axois'
要发送请求的文件:import axios from 'axois'

ログイン後にコピー

config/index.jsファイルにプロキシを設定します

 dev: {   
  proxyTable: {// 输入/api 让其去访问http://localhost:3000/api
   '/api':{  
     target:'http://localhost:3000'//设置调用的接口域名和端口号 ( 设置代理目标)
   },
   '/api/*':{
    target:'http://localhost:3000'
   }，
  changeOrigin: true,
   pathRewrite: { //路径重写 
      '^/api': '/' //这里理解成用‘/api'代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://localhost:3002/user/add'，直接写‘/api/goods/add'即可
    } 
  }

ログイン後にコピー

、クロス-ただし、この知識は開発環境 (dev) でのクロスドメインの問題を解決します。実稼働環境で実際にサーバーにデプロイされる場合、同じドメインからのものでない場合は依然としてクロスドメインの問題が発生します。起源。

axiosリクエストメソッド

Getリクエスト

 // 向具有指定id的用户发出请求
  axios.get('/user?id=1001')
   .then(function (response) {
    console.log(response.data);
   }).catch(function (error) {
    console.log(error);
   });
  // 也可以通过 params 对象传递参数
  axios.get('/user', {
    params: {
     id: 1001
    }
   }).then(function (response) {//请求成功回调函数
    console.log(response);
   }).catch(function (error) {//请求失败时的回调函数
    console.log(error);
   });

ログイン後にコピー

postリクエスト

  axios.post('/user', {
    userId: '10001' //注意post请求发送参数的方式和get请求方式是有区别的
   }).then(function (response) {
    console.log(response);
   }).catch(function (error) {
    console.log(error);
   });

ログイン後にコピー

追加:

vue middle ax クロスドメインの問題を解決し、iOS でインターセプターを使用する

1. Vue の Axios は、vue.use() メソッド宣言の使用をサポートしていません。したがって、これを解決するには 2 つの方法があります:

1 つ目: main.js に axios を導入し、それを vue プロトタイプチェーンのプロパティとして設定して、this.axios をコンポーネント内で直接使用できるようにします

import axios from 'axios';
Vue.prototype.axios=axios;
components：
this.axios({
    url:"a.xxx",
    method:'post',
    data:{
      id:3,
      name:'jack'
    }
  })
  .then(function(res){
    console.log(res);
  })
  .catch(function(err){
    console.log(err);
  })
 }

ログイン後にコピー

ここで注意すべき点は、要求されたデータを axios のデータにコピーするためにこれを使用することは無効であるということです。この問題を解決するには、アロー関数を使用できます。

1. vue cli スキャフォールディングフロントエンドがバックエンドデータインターフェイスを調整するときのローカルプロキシのクロスドメインの問題。たとえば、ローカルホスト http://10.1.5.11:8080/xxx/duty? time=2017-07-07 14 :57:22' は、ドメイン間でのみアクセスできます。直接アクセスすると、「XMLHTTPRequest を読み込めません」と報告されます http://10.1.5.11:8080/xxx/duty?time=2017 -07-07 14:57: 22'。プリフライト要求への応答がアクセス制御を通過しません…

なぜクロスドメインの問題が発生するのですか?これは独自の通信ではないため、詳細については Google にアクセスしてください。ここでは、次のように webpack で proxyTable を設定するだけです:

config/index.js
dev: {
  proxyTable: {
   '/api': {
    target: 'http://10.1.5.11:8080/',//设置你调用的接口域名和端口号 
    changeOrigin: true,   //跨域
    pathRewrite: {
     '^/api': '/'     //这里理解成用‘/api'代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://10.1.5.11:8080/xxx/duty?time=2017-07-07 14:57:22'，直接写‘/api/xxx/duty?time=2017-07-07 14:57:22'即可
    }
   }

ログイン後にコピー

クロスドメインの成功。開発環境 (dev ) はクロスドメインの問題を解決しますが、実際に運用環境のサーバーにデプロイされる場合でも、同じオリジンのサーバーポートからのものでない場合は依然としてクロスドメインの問題が発生します。デプロイされているのは 3001 で、フロントエンドとバックエンドの共同デバッグが必要です。最初のステップでは、開発環境と開発環境でフロントエンドを個別にテストできます。config/dev.env.js で要求されたアドレス API_HOST を構成します。開発環境では、上記で設定したプロキシアドレス API を使用し、本番環境では通常のインターフェイスアドレスを使用するため、次のように設定します。 2 つのファイルでそれぞれ次の構成を実行します。

config/dev.env.js：
module.exports = merge(prodEnv, {
 NODE_ENV: '"development"',//开发环境
 API_HOST:"/api/"
})
prod.env.js
module.exports = {
 NODE_ENV: '"production"',//生产环境
 API_HOST:'"http://10.1.5.11:8080/"'
}

ログイン後にコピー

config/dev.env.js和prod.env.js もちろん、開発環境と本番環境の両方で http://10.1.5.11:8080// を直接リクエストできます。構成後、プログラムはテスト中に開発環境か実稼働環境かを自動的に判断し、次のようなアドレスを使用するために任意のコンポーネントで process.env.API_HOST を使用できます。 process.env.API_HOST+ 'user/login', this.form)

次に 2 番目のステップで、バックエンドサーバーはクロスドメインを構成します。これは、access-control-allow-origin: * はすべてのアクセスを許可することを意味します。要約すると、開発環境では、フロントエンドがクロスドメインにプロキシを構成できます。実際の運用環境では、バックエンドの協力が必要です。ある専門家は、「この方法は ie9 以下では使いにくいです。互換性が必要な場合は、バックエンドのサーバーポートにプロキシを追加するのが最善の方法です。その効果は開発中に webpack プロキシと同様です。」

1. Axios が get post リクエストを送信する問題

post リクエストを送信するときは、通常、送信するコンテンツのタイプである Content-Type を設定する必要があります。application/json は、json オブジェクトを送信することを指しますが、それを文字列化します。前進。 application/xxxx-form は送信を指しますか? a=b&c=d 形式の場合は、qs メソッドを使用して形式を設定できます。qs は、axios のインストール後に自動的にインストールされます。コンポーネントにインポートするだけです。

const postData=JSON.stringify(this.formCustomer);
'Content-Type':'application/json'}
const postData=Qs.stringify(this.formCustomer);//过滤成？&=格式
'Content-Type':'application/xxxx-form'}

ログイン後にコピー

1. インターセプターの使用

アドレスページにアクセスすると、そのページに再度アクセスする前に再度ログインするよう求められることがあります。これは、トークンが失われているなど、ID 認証が失敗したことを意味します。トークンはまだ存在しますローカルに存在しますが、無効であるため、ローカルにトークン値があるかどうかを単純に判断するだけでは問題を解決できません。このとき、サーバーはリクエスト時に 401 エラーを返し、承認エラー、つまりページにアクセスする権限がないことを示します。

我们可以在发送所有请求之前和操作服务器响应数据之前对这种情况过滤。

// http request 请求拦截器，有token值则配置上token值 axios.interceptors.request.use( config => { if (token) { // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了 config.headers.Authorization = token; } return config; }, err => { return Promise.reject(err); }); // http response 服务器响应拦截器，这里拦截401错误，并重新跳入登页重新获取token axios.interceptors.response.use( response => { return response; }, error => { if (error.response) { switch (error.response.status) { case 401: // 这里写清除token的代码 router.replace({ path: 'login', query: {redirect: router.currentRoute.fullPath} //登录成功后跳入浏览的当前页面 }) } } return Promise.reject(error.response.data) });
ログイン後にコピー

下面看下

vue cli脚手架前端调后端数据接口时候的本地代理跨域问题，如我在本地localhost访问接口http://40.00.100.100:3002/是要跨域的，相当于浏览器设置了一到门槛，会报错XMLHTTPRequest can not load http://40.00.100.100:3002/. Response to preflight request doesn't

pass access control…. 为什么跨域同源非同源自己去查吧，在webpack配置一下proxyTable就OK了，如下 config/index.js

dev: { 加入以下 proxyTable: { '/api': { target: 'http://40.00.100.100:3002/',//设置你调用的接口域名和端口号别忘了加http changeOrigin: true, pathRewrite: { '^/api': '/' //这里理解成用‘/api'代替target里面的地址，后面组件中我们掉接口时直接用api代替比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add'即可 } } }
ログイン後にコピー

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

vue渲染时闪烁应如何处理

js获取ModelAndView需要哪些步骤

小程序分享页面返回上一页步骤详解

以上がvue-cli+axios リクエストとクロスドメイン実装手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。