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

jishamo

2019-06-26

关注关注

è·¨å

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

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 url cors

安科网

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

jishamo

jishamo

相关推荐

ajax实现excel报表导出

Jquery ajax书写方法代码实例解析

ajax请求添加自定义header参数代码

springmvc 结合ajax批量新增的实现方法

ajax异步实现文件分片上传实例代码

Ajax实现登录案例

Ajax获取node服务器数据的完整步骤

异步编程｜五分钟让你学会局部刷新Ajax技术

使用AJAX实现UTF8编码表单提交到GBK编码脚本无乱码的解决方法

ajax实现简单登录页面

浅谈AjaxPro.dll,asp.net 前台js调用后台方法

ajax缓存机制

jQuery Ajax 操作函数汇总

Django学习日记-08回顾--温故知新

asp.net 利用Ajax和Jquery在前台向后台传参数并返回值

JavaScript-Runoob-AJAX：ASP/PHP 实例

【Ajax】XMLHttpRequest().readyState的五个状态（0,1,2,3,4）

jQuery ajax - ajax() 方法中的一些属性

为什么Ajax XMLHttpRequest POST方法传递参数失败了

重学Ajax

jishamo