私は知っています.ajaxとクロスドメインです.

request payload、form data、Query String Parametersの違い

Request Payloadがpostを開始して提出します.パラメータはstring、array、objectです.content-typeはtext/play(通常テキスト)

です.

Form Dataがpostを開始して提出し、パラメータはformDataタイプであり、content-typeが指定されていない場合、デフォルトのcontent-typeはmultiad/form-dataがフォームデータを送信するために主に使用され、bolb、fileまたはstring

をサポートします.

Query String Parameetersがget要求を開始すると、パラメータが&で接続され、url?スプライス

なぜクロスドメインがありますか?
フォームの提出にはドメインがありませんが、なぜjsのajax要求にはドメインがありますか?私たちはブラウザのソースストラテジストによるものと知っています.なぜクロスドメインがありますか?

何が同源戦略ですか?同プロトコル、同ポート、同ドメイン名

同ソースポリシー制限の対象

Cookie、Locastrage、IndexDBは読み取りできません.

DOMは獲得できません.

AJAX要求は送信できません.

canvasピクチャgetImageDataを解決し、toData URLがドメインにまたがる問題

を解決する.

どうしてクッキーの動作フローを制限しますか?1.サービスがクライアントにクッキーを送信します.2.ブラウザ格納クッキー;3.その後httpがブラウザを要求するたびに、cookieを自動的にrequest headerに追加し(同ドメイン下)、サービス端末に送信する.クロスドメインでは、cookieは自動的にrequest headerに追加されません.本当にXMLHttpRequestを使いますか?Cookie Cookie/Sessionのメカニズムとセキュリティについての簡単なCSRF攻撃方式

について、-xhr.withCredentialsとCORSとの関係を理解してください.
ドメインをまたぐ解決策

CORSは、ヘッド阮一峰がドメインにまたがる資源共有CORSを要求し、後端にAccess-control-allow-origginを追加し、これにより、ブラウザがリソースサーバにまたがることを許可し、XMLtpRequest要求を送信し、AJAXが同源でしか使用できない制限を克服し、CORS通信全体が自動的にブラウザで行われる.そして、CORS通信を実現するには、サーバー設定が重要です.

WebSocket Websocketは、接続が確立された後、WebSocketのserverとclientは、同じソースポリシーの制限を受けずに、積極的に相手にデータを送信または受信することができる双方向通信プロトコルである.

postMessageは、異なるウィンドウ間の通信

に適合する.

iframeにformフォームを追加して提出すると、iframeを動的に作成し、フォーム提出のためにajax提出の効果を模擬します.iframeは表示しなくてもいいです.フォーム提出によってiframeを更新しましたが、ユーザーに対しては意識がありません.

document.doman

//          ，        ，         document.domain   Cookie。  ：www.baidu.com   hi.baidu.com
  test.xxx.com a.html
  
  	document.domain="baidu.com";//      
  	document.cookie="test1=hello";
  

  test.xxx.com b.html
  
  	document.cookie
  

  domain='baidu.com';//        

jsop(script)scriptタグのsrc属性の中のリンクはドメインをまたぐjsスクリプトにアクセスできます.この特性を利用して、サーバーはJSONフォーマットのデータに戻らず、ある関数を呼び出すためのjsコードを返して、srcで呼び出しを行い、ドメインをまたぐ

を実現しました.

  <script type="text/javascript" src="http://aa.com/index.php?callback=test"></script>
  	<script type="text/javascript">
  		function test(data){
  			console.log(data);
  		}
  	</script>

  	<?php
  		if(callback){
  			test({'aa':123})
  		}
  	?>

、link(background)

  var s=new Image();
   	vat start=Date.now();
   	s.src="http://www.baidu.com/s.gif";
   	s.onload=function(){
   		var end=Date.now();
   		var t=end-start;
   		v=s.size / t +'kb/s';
   	}

nginxエージェント

server{
  location ^~ /api {
      proxy_pass http://localhost:8080;
  }
}

vue-cli devServe構成

proxyTable: {
  '/list': {
    target: 'http://api.xxxxxxxx.com',
    changeOrigin: true,
    pathRewrite: {
      '^/list': '/list'
    }
  }
}

フロントエンドのネットワーク要求方式を全面的に分析する
ajax
XMLHttpRequest,(IE 6でActiveXObjectを使用する)パラメータwithCredentials:ajaxはデフォルトでは同ソース要求のクッキーを携帯するように要求しますが、ドメイン間要求はcookieを携帯しません.xhrを設定するwithCredentialsの属性はtrueです.
Jquery
$ajaxはjqueryの生AJAXパッケージです.

$.ajax({
    dataType: 'json', 
    //        
    contentType: 'application/json', 
    //       
    headers: {
    'Content-Type',
    'application/json'
    },
    //      
    xhrFields: { withCredentials: true }, 
    //     cookie
    data: JSON.stringify({a: [{b:1, a:1}]}), //     
    error:function(xhr,status){  //     
      console.log(xhr,status);
    },
    success: function (data,status) {  //     
      console.log(data,status);
    }
})

Fetch
Fetch APIはHTTPパイプラインを訪問し操作するための強力な生APIであり、XMLHttpRequestの代替品であり、元のjsパッケージに基づいています.XMLtpRequestオブジェクトを使用していません.互換性を考慮して、polyfill fetdデフォルトはcookieを持たないので、アクセサリーを追加する必要があります.

//    credentials    same-origin,         coodkie
if(request.credentials === 'include') {
  xhr.withCredentials = true
} 
else if(request.credentials === 'omit') {
  xhr.withCredentials = false
}

AXIOS
axiosはXHRのパッケージです.プロミセのHTTPライブラリに基づいています.ブラウザとnodeの使用防止CSRFをサポートしています.つまり、cookieからもらったkeyを各要求ごとに持ってきてください.ブラウザのソースポリシーによって、偽のウェブサイトはクッキーの中でkeyを得ることができません.このように、バックグラウンドはこの要求が簡単にユーザーがウェブサイトに偽の入力ミスを判別できます.正しい策略をとる.

axios.get('/user', {
  params: {
    ID: 12345
  }
})
axios.post('/add',{
  data:{
    username:'lily'
  }
})

いらっしゃいませhttps://github.com/mrzhang90/note/blob/master/book/ajax.md