vue-cli axios リクエストメソッドとクロスドメイン処理の問題

この記事は主に vue-cli axios リクエスト方法とクロスドメイン処理の問題を紹介しており、クロスドメインの問題を解決するための vue の axios とインターセプターの使用についても言及しています。参照できるようになります

vue-cli axiosリクエストメソッドとクロスドメイン処理をしてみましょう

• axiosを使用するためにファイルにaxiosを導入します

• cnpm install axios --save

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

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

試してみてください。クロスドメインは成功しましたが、この知識は開発環境でのクロスドメインの問題を解決します(dev) であり、運用環境のサーバーに実際にデプロイされている場合は、そうではありません。同じオリジンに関するクロスドメインの問題が依然として存在します。

axiosリクエストメソッド

リクエストを取得

 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'即可
    } 
  }

postリクエスト

 // 向具有指定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);
   });

追加:

vue の axios はクロスドメインの問題を解決しますインターセプターの使用法 1. vue の axios は vue.use() メソッド宣言をサポートしません。 したがって、これを解決するには 2 つの方法があります:

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

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

ここで注意すべき点は、リクエストされたデータを 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 を設定するだけで問題ありません。

クロスドメインの成功ですが、これは開発環境 (dev) でクロスドメインの問題が解決されただけですが、実際に運用環境のサーバーにデプロイされた場合でも、依然としてクロスドメインの問題が発生します。たとえば、デプロイしたサーバー ポートは 3001 で、最初のステップはフロント エンドと開発環境で別々にテストできます。 config/dev.env.js および prod.env.js、つまり、開発/運用環境では、要求されたアドレス API_HOST をそれぞれ構成します。開発環境では、上記のプロキシ アドレス API の通常のインターフェイスを使用します。アドレスは本番環境で使用するのでこのように設定し、2つのファイルにそれぞれ以下の設定を行います。

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);
  })
 }

もちろん、開発環境と運用環境の両方で 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 プロキシと同様です。」

config/dev.env.js和prod.env.js

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

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

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'即可
    }
   }

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

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

すべてのリクエストを送信する前、およびサーバーの応答データを操作する前に、この状況をフィルタリングできます。

えー

以下を見てください

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'即可
    }
   }
  }

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

Ajax获取响应内容长度的方法

Ajax方式实现定期更新页面某块内容的方法

ajax读取properties资源文件数据的方法

以上がvue-cli axios リクエストメソッドとクロスドメイン処理の問題の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。