Vue のクロスドメインとは何を意味しますか?

vue では、クロスドメインとは、ブラウザが他の Web サイトからスクリプトを実行できないことを意味します。これはブラウザの同一生成元ポリシーによって引き起こされ、ブラウザによって JS に課されるセキュリティ制限です。クロスドメインの性質は、ブラウザの同一オリジン ポリシーに基づくセキュリティ手法であり、同一オリジン ポリシーはブラウザの中核で最も基本的なセキュリティ機能である規約です。 Vue クロスドメイン ソリューション: 1. JSONP、2. CORS、3. プロキシ。

#このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。

1. クロスドメインとは

クロスドメインとは、ブラウザーが他の Web サイトからのスクリプトを実行できないことを意味します。これは、ブラウザーの同一オリジン ポリシー (ブラウザーによって JS に課されるセキュリティ制限) が原因で発生します。

クロスドメインの性質は、

同一オリジン ポリシーに基づいてブラウザで使用されるセキュリティ方法です。

同一オリジン ポリシー (Sameoriginpolicy) は合意であり、これが最も重要です。ブラウザ向けのもの コアで最も基本的なセキュリティ機能

#いわゆる同一オリジン (つまり、同じドメイン内) には、次の 3 つの類似点があります。

同じプロトコル (プロトコル) )
• ホストは同じ (ホスト)
• ポートは同じ (ポート)

逆に、ソース以外のリクエスト、つまり、プロトコル、ポート、ホストのいずれかが異なる場合、クロスドメイン生成が発生します。

クロスドメインはブラウザの制限であることに注意してください。キャプチャ ツールを使用してインターフェイス データをキャプチャすると、インターフェイスがデータを返していることがわかりますが、これはブラウザの制限のみであり、データを取得することはできません。データは、ポストマン要求インターフェイスを使用して要求できます。これらは、クロスドメインがブラウザの制限であることを再度裏付けています。

2. 解決方法

クロスドメインの問題を解決するには多くの方法があります。以下に 3 つの方法を示します:

JSONP
• CORS
• Proxy

vue プロジェクトでは、主に CORS または # に焦点を当てます##Proxyこれら 2 つのソリューションを拡張します

CORSCORS (Cross-Origin Resource Sharing、クロスドメイン リソース共有) は、システム。これは、送信される一連の HTTP ヘッダーで構成されます。これらの HTTP ヘッダーは、ブラウザーがフロントエンド JavaScript コードによるクロスドメイン要求への応答の取得を妨げるかどうかを決定します。

CORS

これは実装が非常に便利で、HTTP ヘッダーを追加するだけで、サーバーが許可されたアクセス ソースを宣言できるようになります#バックエンドが CORS

を実装している限り、クロス

##koa

framework を例に挙げます

ミドルウェアを追加し、Access-Control-Allow- を直接設定しますOrigin

Request header

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">app.use(async (ctx, next)=&gt; { ctx.set(&amp;#39;Access-Control-Allow-Origin&amp;#39;, &amp;#39;*&amp;#39;); ctx.set(&amp;#39;Access-Control-Allow-Headers&amp;#39;, &amp;#39;Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild&amp;#39;); ctx.set(&amp;#39;Access-Control-Allow-Methods&amp;#39;, &amp;#39;PUT, POST, GET, DELETE, OPTIONS&amp;#39;); if (ctx.method == &amp;#39;OPTIONS&amp;#39;) { ctx.body = 200; } else { await next(); } })</pre><div class="contentsignin">ログイン後にコピー</div></div>

ps:

Access-Control-Allow-Origin

* に設定することは、実際にはほとんど意味がありません。実際のアプリケーションでは、オンラインになる前に

Access-Control-Allow を設定します。 -Origin の値はターゲット host

に設定されますプロキシ

プロキシ (プロキシ) は、ネットワーク プロキシとも呼ばれ、(通常はクライアント) が別のネットワーク端末 (通常はサーバー) と間接的に接続できるようにする特別なネットワーク サービスです。 ）このサービスを通じて。ゲートウェイやルーターなどの一部のネットワークデバイスには、ネットワークプロキシ機能があります。一般に、プロキシ サービスは、ネットワーク端末のプライバシーやセキュリティを保護し、攻撃を防ぐのに役立つと考えられています。

オプション 1

vue を使用する場合-cli

スキャフォールディング ツール プロジェクトを構築するには、

webpack を使用して、リクエストのプロキシ オブジェクトとしてローカル サーバーをセットアップします。 リクエストをターゲットに転送します。サーバー経由で結果を取得し、フロントエンドに転送しますが、最終的にはオンラインで公開します。Web アプリケーションとインターフェイス サーバーが一緒になっていない場合でも、vue でドメインをまたぐことになります。 config.js

ファイルに次のコードを追加します。

amodule.exports = {
    devServer: {
        host: '127.0.0.1',
        port: 8084,
        open: true,// vue项目启动时自动打开浏览器
        proxy: {
            '/api': { // '/api'是代理标识，用于告诉node，url前面是/api的就是使用代理的
                target: "http://xxx.xxx.xx.xx:8080", //目标地址，一般是指后台服务器地址
                changeOrigin: true, //是否跨域
                pathRewrite: { // pathRewrite 的作用是把实际Request Url中的'/api'用""代替
                    '^/api': "" 
                }
            }
        }
    }
}

axios

経由でリクエストを送信する場合、リクエストのルート パスを構成します

axios.defaults.baseURL = '/api'

オプション 2

さらに、エンドツーエンド プロキシ リクエスト転送サービスを使用することもできます

Take the例としての Express

フレームワーク

var express = require('express');
const proxy = require('http-proxy-middleware')
const app = express()
app.use(express.static(__dirname + '/'))
app.use('/api', proxy({ target: 'http://localhost:4000', changeOrigin: false
                      }));
module.exports = app

オプション 3

パス済み

nginx の構成プロキシの実装

server {
    listen    80;
    # server_name xxx.xxx.com;
    location / {
        root  /var/www/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
    location /api {
        proxy_pass  http://127.0.0.1:3000;
        proxy_redirect   off;
        proxy_set_header  Host       $host;
        proxy_set_header  X-Real-IP     $remote_addr;
        proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
    }
}

[関連する推奨事項: vuejs ビデオ チュートリアル

、

Web フロントエンド開発

]

以上がVue のクロスドメインとは何を意味しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。