uniapp のクロスドメインの問題を理解できるようにする (詳細な例)

この記事では、uniapp クロスドメインに関する関連知識を提供します。クロスドメインの問題が発生する理由を紹介します。これはブラウザのセキュリティ保護メカニズムです。見てみましょう。関連する質問、希望それはみんなを助けます。

推奨: 「uniapp チュートリアル 」

クロスドメインの問題が発生するのはなぜですか?

ブラウザの同一生成元ポリシーによる、ブラウザのセキュリティ保護メカニズムです。
ブラウザが 1 つのドメイン名の Web ページから別のドメイン名のリソースをリクエストする場合、プロトコル、ドメイン名、ポートが異なる場合はクロスドメインになります

解決方法は多数ありますuniapp のクロスドメインの問題 (以下に要約) よく使用される方法をいくつか示します

#1. jsonp を使用すると、

dataType:'jsonp'

# を追加できます## to our encapsulated network communication. 要約:

ただし、このメソッドは get リクエストのみをサポートしており、post は使用できないようです。 詳細については、https://www.imooc.com/article/291931

2 を参照してください。 uniapp ルート ディレクトリ

"h5": {
	"devServer": {
		"proxy": {
			"/8888": {
				"target": "https://www.baidu.com/api",
				"changeOrigin": true,
				"pathRewrite": {
					"^/8888": "/"
				}
			},
			"/8800": {
				"target": "https://www.taobao.com/api",
				"changeOrigin": true,
				"pathRewrite": {
					"^/8800": ""
				}
			}
		}
	}},

概要:

この方法は他の方法ほど柔軟ではありませんが、uniapp に最も適しています。結局のところ、これは公式の設定ファイルです。

具体的な参照: https://uniapp.dcloud.io/collocation/manifest?id=h5

3. uniapp ルートに新しいファイル vue.config.js を作成します。

module.exports = {
  devServer: {
    proxy: {
      '/dev': {
        target: 'https://www.baidu.com/api',
        changeOrigin: true,
        pathRewrite: {
          '^/dev': ''
        }
      }
    },
  }}

概要:

vue.config.js は vue3、vue2 でのみ使用できるため、この設定方法は役に立たない可能性があります。構成 vue.config.js が無効です。 vue のバージョンは、manifest.json ファイルの vueVersion フィールドで確認できます。以下に示すように:

具体的な参照: https://cli.vuejs.org/zh/config/#devserver-proxy vue2 構成がクロスドメインの場合は、https: //blog.csdn .net/weixin_45679977/article/details/103004678


4. Google Chrome のクロスドメイン制限を解除します

TASKKILL /F /IM chrome.exe

start chrome.exe --args --disable-web-security --user-data-dir

pause

概要:

必ずブラウザを再起動してください

具体的な参考情報: https://blog.csdn.net/MisTTT/article/details/75976123

5. その他の方法

(1). hbuilderx の組み込みブラウザで直接実行、uniapp は正式に組み込みブラウザでクロスドメイン処理を実行します (2). クロスドメイン拡張機能をサポートできる Google ブラウザをダウンロードします: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

詳細については、参照: https://ask.dcloud.net.cn/article/35267

推奨: 「

uniapppopular チュートリアル

」

以上がuniapp のクロスドメインの問題を理解できるようにする (詳細な例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。