Ajax跨域问题及解决方案（jsonp，cors）

è·¨å

è·¨åæä¸ä¸ªæ¡ä»¶ï¼æ»¡è¶³ä»»ä½ä¸ä¸ªæ¡ä»¶å°±æ¯è·¨å

1ï¼æå¡å¨ç«¯å£ä¸ä¸è´
2ï¼åè®®ä¸ä¸è´
3ï¼ååä¸ä¸è´

è§£å³æ¹æ¡ï¼

1.jsonp

ä»£ç å¦ä¸ï¼

htmlï¼

<body>
  <form action="/" method="post" enctype="multipart/form-data">
    <input type="text" name="xinxi" id="info"><br>
    <input type="file" name="file" id="file"><br>
    <input type="button" value="æäº¤" name="submit" id="btn">
  </form>
</body>
<script src="./jquery.js"></script>
<script>
  //æååå¥½å½æ°ï¼è°ç¨å½æ°éè¦ä¼ å
  function callback(data){
    alert(data);
  }
  //å¨ææ·»å scriptæ ç¾åsrcå±æ§
  $('#btn').on('click',function(){
    var sc = document.createElement('script');
    sc.src = 'http://soul:8888/kuayu?cb=callback';
    $('head').append(sc); 
  })
</script>ãã

jsï¼

var http = require('http');
 var url = require('url');
 var server = http.createServer();
 server.listen('8888',function(){
   console.log('8888');
 });
 server.on('request',function(req,res){
   var urls = url.parse(req.url,true);
   if(urls.pathname == '/kuayu'){
     res.end('callback("jsonp")');//è¿åçæ°æ®éæ¯åç«¯å®ä¹çå½æ°è°ç¨çå½¢å¼
   }
 });

è¿è¡ç»æï¼

Ajax跨域问题及解决方案（jsonp，cors）

æ»ç»ä¸ä¸ï¼

2.cors

res.setHeader('Access-Control-Allow-Origin','*');

htmlï¼

<body>
  <form action="/" method="post" enctype="multipart/form-data" id="form">
    <input type="text" name="xinxi" id="info"><br>
    <input type="button" value="æäº¤" name="submit" id="btn">
  </form>
</body>
<script src="./jquery.js"></script>
<script>
  $('#btn').on('click', function () {      
        $.ajax({
            url: 'http://soul:8888/kuayu',
            type:'delete',  
            async:false,
            success: function (data) {
              alert(data);
            },
        })
  })
</script>

jsä»£ç ï¼

<body>
  <form action="/" method="post" enctype="multipart/form-data" id="form">
    <input type="text" name="xinxi" id="info"><br>
    <input type="button" value="æäº¤" name="submit" id="btn">
  </form>
</body>
<script src="./jquery.js"></script>
<script>
  $('#btn').on('click', function () {      
        $.ajax({
            url: 'http://soul:8888/kuayu',
            type:'delete',  
            async:false,
            success: function (data) {
              alert(data);
            },
        })
  })
</script>

ææï¼

ãããå¾å¤äººä¹è®¤ä¸ºä½¿ç¨CORSè§£å³è·¨åå¾ç®åï¼åªéè¦å¨æå¡å¨æ·»å ååºå¤´ â Access-Control-Allow-Origin ï¼* â å°±å¯ä»¥äºï¼

æ»¡è¶³ä»¥ä¸æææ¡ä»¶ï¼è¢«è§ä¸ºç®åç±»åçè¯·æ±ï¼

2ï¼è¯·æ±å¤´ç±»ååªè½æ¯ AcceptãAccept-LanguageãContent-LanguageãContent-Typeï¼æ·»å å¶ä»é¢å¤è¯·æ±å¤´ä¸è¡ï¼

3ï¼è¯·æ±å¤´ Content-Type å¦ææï¼å¼åªè½æ¯ text/plainãmultipart/form-dataãapplication/x-www-form-urlencoded ä¸çä¸ç§ï¼å¶ä»å¼ä¸è¡ï¼

4ï¼è¯·æ±ä¸çä»»æ XMLHttpRequestUpload å¯¹è±¡åæ²¡ææ³¨åä»»ä½äºä»¶çå¬å¨ï¼

æ»ç»ä¸ä¸ï¼

å¦æè¯·æ±æ¹å¼ä¸ºgetåpostç®åè¯·æ±ï¼ååªéè¦è®¾ç½®ååºå¤´ï¼res.setHeader('Access-Control-Allow-Origin','*');æ¥åè®¸æä¸ä¸ªå æè ææåè¿è¡æ°æ®å±äº«ï¼

è¥æ¯å¶ä»æ¹å¼çè¯·æ±ï¼ä¼å¨åéçæ£çè¯·æ±ä¹ååéä¸ä¸ªoptionsè¯·æ±ï¼éè¿optionsè¯·æ±éè®¾ç½®ï¼res.setHeader('Access-Control-Allow-Methods', 'DELETE')ï¼

åç¥æå¡å¨æ£å¼è¯·æ±ä¼ä½¿ç¨åªä¸ç§ HTTP è¯·æ±æ¹æ³ã

æ»ç»

Ajax跨域问题及解决方案（jsonp，cors）

相关推荐