目次
1.cors: サードパーティモジュールのegg-corsを使用する必要があります。
フロントエンドとバックエンドの分離
他の人のサーバーでフロントエンド コードを操作する方法をご覧ください。
アクセスできるように、フロントエンド コードはサーバーに配置する必要があり、バックエンド コードもサーバーに配置する必要があります。
フロントエンド コードは Web サーバー (Web ページへのアクセスを提供するサーバー) に配置されます。
Eggフレームワークで作成したサーバーはフロントエンドコードでもバックエンドコードでも配置できますが、フロントエンドとバックエンドを分離したい場合は、バックエンドコードをEggサーバーに配置してから、フロントエンド コードを別のサーバーに配置します (自分で作成することもできます)。サーバーは、他の人 (Apache または Nginx など)が作成したサーバーに配置することもできます。ここでのフロントエンド コードは、他の人 (Apache または Nginx) によって書かれたサーバー上に配置されています。
現時点では、新しい vscode インターフェイスを開いてフロントエンド プロジェクトを配置する必要があります。元の vscode にはバックエンド プロジェクトが含まれています。
このようにフロントエンドとバックエンドを分離すると、クロスドメインの問題が発生しやすくなります。
クロスドメイン
Ajax リクエストは同じオリジンのものに限定されます (同じオリジン: 同じドメイン名、プロトコル、ポートが同じオリジンからのものです)。
クロスドメイン: プロトコル、ドメイン名、またはポートに違いがあると、クロスドメインが発生します。
フロントエンド: Apache サーバーアクセス: http://127.0.0.1:80
バックエンド: Egg サーバーアクセス: http://127.0.0.1:8000
分析: ポートが異なるため、クロスドメインになります。
クロスドメイン ソリューション
1.cors: サードパーティモジュールのegg-corsを使用する必要があります。
このフレームワークは、 cors クロスドメイン要求を実装するためのEggcorsプラグインを提供します。
ダウンロード: npm i --save Egg-cors
その後：
//开启插件：在 config/plugin.js
//跨域处理
cors: {
enable: true,
package: 'egg-cors',
}もう 1 つ: (バックエンド サーバー コードを変更した後、サーバーを再起動する必要があります)
フロントエンドとバックエンドが分離されていない場合は、これを使用します。
//配置cors：在 config/config.default.js
// 跨域的配置
config.cors = {
origin: '*', //允许的域，*代表所有的
allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH' //允许跨域的请求方法
};分析: * は、フロントエンド コードがどのサーバーに配置されていても、egg バックエンド サーバーにアクセスできることを意味します。特定のドメインからのアクセスを許可するように設定することもできます。
以下を使用してフロントエンドとバックエンドを分離します。
//配置cors：在 config/config.default.js
// 跨域的配置
config.cors = {
// origin: '*', //允许的域，*代表所有的
origin: 'http://127.0.0.1', //如果想携带cookie,这里必须指定前端服务器ip和端口号
allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH', //允许跨域的请求方法
credentials:true //后端允许跨域携带cookie
};