VUE2: axios のクロスドメイン問題 (「Access-Control-Allow-Origin」がない) とその解決策 (個人的なテストが役立ちます。プロセス全体にグラフィック バージョンが付属しています。収集することをお勧めします)

今日は、開発途中のインテグレーションとして、新しいフロントエンドプロジェクトを書きました。会社は機密プロジェクトなので、企業コードを貼り付けてはいけません。家に帰ってから、まだ記録しておいたほうがいいと思ったので、書きました。誰でも解決できるようにシミュレーションしました。

VUE2 の開発プロセスでは、フロントエンド プログラマ、特に私のようなフロントエンドが中途半端なプログラマは必ずクロスドメインの問題に遭遇します。エラー メッセージは次のとおりです。

'http://localhost:8080/XXXXXXXX' の XMLHttpRequest にアクセスします。オリジンから 'http://localhost:8081' CORS ポリシーによってブロックされました: 「Access-Control-Allow-Origin」なしヘッダーが要求されたリソースに存在します。

GET http://localhost:8080/XXXX net::ERR_FAILED 200 (OK)

キャッチされない (約束された) エラー: ネットワーク エラー

などはすべてクロスドメインの問題エラーです。解決方法を見てみましょう。

まず main.js ファイルを見てください。

main.js ファイルを追加します。

import Axios from 'axios'
Axios.defaults.baseURL = '/api'
Axios.defaults.headers.post['Content-Type'] = 'application/json'

次に、vue.config.js ファイルを確認します。ファイルがない場合は自分で作成しますが、通常は存在します。名前は間違っていません。

devServer への主な追加機能は次のとおりです。

  devServer: {
    host: '0.0.0.0', //可以忽略不写
    port: 8081,//它是用来修改你打开后的端口号的
    open: true,//值为 true的话，项目启动时自动打开到浏览器里边， false不会打开
    proxy: {
      '/api': {
        target: ' http://localhost:8080/',//换成你自己项目的开发或者生产地址
        ws: false, //也可以忽略不写，不写不会影响跨域
        changeOrigin: true, //是否开启跨域，值为 true 就是开启， false 不开启
        pathRewrite: {
          '^/api': ''//注册全局路径， 但是在你请求的时候前面需要加上 /api  
        }
      }
    }
  }

追加後の効果は以下の通りです。 

 

 一般的な原則として、Axios.defaults.baseURL = '/api' を追加しただけです。これにより、リクエストを送信するたびに /api プレフィックスが追加されます。ここでは、インターセプターが API プレフィックスをインターセプトして、次の値に置き換えます。目標。

次に、axios リクエストを見てみましょう。フック関数を自由に書きました。

エフェクトを見てください

リクエストが成功し、クロスドメイン エラーが報告されていないことがわかります。フロントエンドの道をゆっくり学んで、実際の業務で遭遇した問題点や解決策などをシェアしていきますので、参考になったら「いいね！」をお願いします！ ！ ！ ！