vue プロジェクトでクロスドメインを解決するために一般的に使用される方法

1. クロスドメインとは?

クロスドメインの問題の出現は、ブラウザーの同一生成元ポリシーの問題によるものです。いわゆる相同性とは、同じプロトコル、同じホスト、同じポートという 3 つの点が共通している必要があることを意味します。それらのいずれかが異なる場合、つまり、同一オリジンでないリクエストが発生すると、クロスドメインが発生します。インターフェイスをリクエストするときに、Access-Control-Allow-Origin などの単語が表示される場合、リクエストがクロスドメインであることを意味します。

2. クロスドメインを解決するには?

クロスドメインソリューション:

jsonp
cors
Node middleware proxy (twice cross-domain) that is, Proxy
nginx reverse proxy CORS supports all types of HTTP requests and is the basic solution for cross-domain HTTP requests.
JSONP only supports GET requests. JSONP の利点は、それが旧式のブラウザーをサポートし、CORS をサポートしていない Web サイトからデータを要求できます。
Node ミドルウェアプロキシであるか、nginx リバースプロキシであるかに関係なく、サーバーは主に同一生成元ポリシーによって制限されません。
日常業務で最も一般的に使用されるクロスドメインソリューションは、cors と nginx リバースプロキシです。

CROSとProxyの2つの方法を中心に解説

1、クロス

CROS は Cross-Origin Resource Sharing の略で、クロスドメインリソースシェアリングの意味に翻訳されます。これは、送信された一連の HTTP ヘッダーで構成され、ブラウザーがフロントエンド JavaScript コードがクロスオリジン要求への応答を取得するのを防止するかどうかを決定します。
CORS の実装は比較的単純で便利で、サーバーが許可されたアクセスソースを宣言できるように、いくつかの HTTP ヘッダーを追加するだけで済みます。バックエンドが CROS を実装していれば、クロスドメインを実現できます。

2. プロキシ

ローカルサーバーを起動して、ターゲットサーバーにプロキシ転送します。クロスドメインはブラウザ専用であり、ノードサービスによって送信されたリクエストはクロスドメインに出てこないため、クロスドメインの問題が解決されます.
vue.config.js ファイル内

1. 複数の異なるプロキシを設定可能

devServer: {
    
    
    proxy: {
    
    
      '/api': {
    
    //代理标识，一般是每个接口前的相同部分
        target: 'http://23.15.11.15:8000', // 这里写的是访问接口的域名和端口号
        changeOrigin: true, // 允许跨域请求
        pathRewrite: {
    
     // 重写路径，替换请求地址中的指定路径
          '^/api': '/user'
        }
      },
      '/login': {
    
    
		 target: 'http://23.15.11.15:8000',
		 changeOrigin: true,
		 pathRewrite:{
    
    
		   '^/login':''  //替换成空
		 }
	   }
    }
  },

例：

http://localhost:8080/api/test --> http://23.15.11.15:8000/user/test
http://localhost:8080/login/index–> http://23.15.11.15:8000/index

2. すべてのインターフェイスのプロキシ

devServer: {
    
    
 proxy: 'http:/www.ljc.com'
}

例：

http://localhost:8080/api/test --> http://www.ljc.com/api/test
http://localhost:8080/login/index–> http://www.ljc.com/login/index