AJAX跨域

Posted 2020-07-23

AJAX跨域
AJAX不允许跨域访问。

跨域是指浏览器B显示的是服务器S1的数据，全是从S1取得的数据则是同域；但如果B显示的S1上的数据的某个比如img是从S2上取得的数据，则是跨域。端口不一样也是跨域。跨域不仅是跨服务器，还是跨IP，跨端口。

AJAX通过三种方法，可以解决跨域问题。

1、设置请求头，每一个路径里都要设置，可以封装成方法方便调用。
       res.setHeader("Access-Control-Allow-Origin","*");
       res.setHeader("Access-Control-Allow-Methods","GET,POST");
       3000服务器请求跨域到3001，需要在3001里改写代码
       
2、设置代理

3、JSONP  即JSON with padding,script的src可以提交服务器。本质上jsonp不是AJAX，是采用script绕过了AJAX的跨域问题。

       3001的路由表中，写：
       router.get(‘/jsonp‘,function(req,res){
           res.send("callback(‘ajax的跨域访问‘)")；
       });     //这种方法只能get提交
       
       在3000的html中输入：
       $("img").click(function(){
          $("body").append("<script src=‘http=//localhost:3001/users/jsonp‘><\/script>");    //<\/script>里的\是转义符
       });
       
       用ajax实现jsonp
       $.ajax({
          type:"get,
          url:"http://localhost:3001/users/jsonp",
          data:{username:"abcabc"},
          dataType:"jsonp",
          success:function(data){
              console.log(data);
              }
          });
        3001的路由表中，写：
        router.get(‘/jsonp‘,function(req,res){
           res.jsonp("ajax的跨域访问")；
        });