再編成する:
1. js は xhr を開始します。ドメイン名ポートが異なる限り、クロスドメイン リクエストが生成されます。
2. Access-Control-Allow-Credentials が true に設定されている場合、Access-Control-Allow-Origin を * に設定することはできず、Access-Control-Allow-Headers を任意に設定することはできず、リクエスト結果の失敗に影響します。 。
3. リクエストが application/json の場合、試行リクエスト OPTIONS が送信され、application/x-www-form-urlencoded フォーム送信モードはポストリクエストのみを開始します。
axios.interceptors.request.use(
config => { config.headers["Access-Control-Allow-origin"] = "*"; config.headers["Content-Type"] = "application/x-www-form -urlencoded; charset=UTF-8";//無效 return config; }, err => Promise.reject(err) ); axios.post( "http://127.0.0.1:12092/ImaterialBatchPhoto/ExecProc", { params: {"procName":"ToubanMarketingMX","paramslist":["2022春季",11]} } ) 。
.catch( err => { console.log(err); } )
結果を図に示します。
オプション リクエストを開始して、クロスオリジン リクエストを許可するかどうかをサーバーに問い合わせます。
クロスドメインの問題のほとんどはここにあります。Axios はオプション リクエストを開始します。サーバーが特定の設定のみを渡す場合、オプション リクエストを解決できません。たとえば、カスタム インターセプタ、シリアル化などがオプション リクエストを処理せず、その結果、 optiongs リクエストの失敗。
一般的には、自分でブロックするインターセプターを書いて、オプションリクエストであれば強制処理成功と判断します。
WCF RESTful を例に挙げます。
インターセプター MessageInspector を定義します: IDispatchMessageInspector
書き換え方法:
public void BeforeSendReply(ref Message Reply, object correlationState)
{ #region 理跨領域オプション握手 HttpRequestMessageProperty request = null; foreach (OperationContext.Current.RequestContext.RequestMessage.Properties.Values の var 値) { if (値は HttpRequestMessageProperty です) { request = HttpRequestMessageProperty としての値。 壊す; } } //强行重写オプション请要求成功 if (request.Method == "OPTIONS") {
HttpResponseMessageProperty 応答 = null;
foreach (reply.Properties.Values の var 値)
{ if (値は HttpResponseMessageProperty です) { 応答 = HttpResponseMessageProperty としての値; 壊す; if (response != null) { //OperationContext.Current.ServiceSecurityContext.PrimaryIdentity.Name response.Headers["Access-Control-Allow-Origin" ] = "*"; response.Headers.Add("Access-Control-Allow-Headers", "*");
response.Headers.Add("アクセス制御の許可メソッド", "GET、POST、PUT、DELETE、OPTIONS");
response.Headers["Content-Type"]= "application/json;charset=UTF-8";
応答.StatusCode = System.Net.HttpStatusCode.OK;
#
エンド
リージョン }
JQ によって開始されたリクエストは異なり、より高度であるようです。crossDomain: true に設定します。JQ によって送信されたリクエストには、実際にはテーマに直接 POST するオプションがありません。ここでは jquery-3.1.1 を示します。
$.ajax({ url: url,//ここをサーバーのアドレスに置き換えます type: type, crossDomain: true, //クロスドメインを許可します data: data, dataType: dataType, success: function (data) { alert( data. message); //alert(successAlert); }, error: function (err) { alert(err. message) //alert(errorAlert); } });
一般に、クロスドメインはクロスクライアント設定とはほとんど関係がないようですが、
サーバー側の処理によりクロスドメイン処理が可能になります。処理オプションのリクエストに注意してください。
参考：