zoukankan      html  css  js  c++  java
  • CORS跨域请求的限制和解决

    我们模拟一个跨域的请求,一个是8888,一个是8887
    //server.js
    const http = require('http');
    const fs = require('fs');
    http.createServer(
    function(req,res){   console.log('req come', req.url);   const html = fs.readFileSync('test.html', 'utf8');   res.writeHead(200,{     'Content-Type': 'text/html'   })   res.end(html); }).listen(8888);
    //server2.js
    const http = require('http');
    
    http.createServer(function(req,res){
      console.log('req come', req.url);
      res.end('123');
    }).listen(8887);

    然后分别启动这两个服务

    <!--test.html-->
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
      </head>
      <body>
        <script>
          var xhr = new XMLHttpRequest();
          xhr.open('GET', 'http://127.0.0.1:8887');
          xhr.send();
        </script>
      </body>
    </html>
    html里面发送了一个8887的get请求,在server 8888端口里面读取了html的内容并发送8887的请求,就制造了一个跨域请求



    一、跨域-设置 "Access-Control-Allow-Origin"
    请求以后,控制台提示,No 'Access-Control-Allow-Origin' ,'Access-Control-Allow-Origin' 是什么呢?就是服务端允许跨域的头,要怎么设置才能让这个跨域请求生效呢?
    // server2.js
    const http = require('http');
    
    http.createServer(function(req,res){
      console.log('req come', req.url);
      res.writeHead(200, {
        'Access-Control-Allow-Origin': '*'
      })
      res.end('345');
    }).listen(8887);
    在server2.js里面设置这个请求头,再从8888里面请求,发现8888里面会开始请求8887,并且没有报错了,这个*是代表所有的网站都可以跨域请求8887,我们可以限制域名,比如'Access-Control-Allow-Origin': 'http://localhost:8888',这里只能设置一个值,不能设置多个,那么想设置多个怎么办呢?可以设置一个值,动态的去判断
    这就是符合期望的跨域状态,这里就有一个概念,我们就这么一个操作,就可以使这个跨域请求让server2接受,其实不管server2有没有接受这个请求,8888都会去发送这个8887的请求,只是没看到这个头,会把请求返回内容给忽略掉,在curl并没有这样的限制,这是浏览器跨域的限制
    二、跨域-jsonp
    是否只有通过这种方式实现跨域呢,显然不是,因为我们知道json这样一个实现方法,那jsonp到底做了什么呢?我们来看一下,8888端口的内容不变
    //server2.js
    const http = require('http');
    http.createServer(function(req,res){
      console.log('req come', req.url);
      res.end('345');
    }).listen(8887);
    server2里面去除掉Access-Control-Allow-Origin,test.html请求的方式改掉
    <!--test.html-->
    <body>
      <!-- <script>
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'http://127.0.0.1:8887');
        xhr.send();
      </script> -->
      <script src="http://127.0.0.1:8887"></script>
    </body>
    再重启8887服务,发现请求使正常发送,也是正常返回的,这是因为,浏览器允许js的跨域请求,他并不在乎跨域的头,所以可以在script里面的代码是一段可执行的js代码,然后去调用jsonp,在发起请求之前,他给我们设置的一些内容,这样就可以达到目的,这就是json的原理,利用了link,script标签的可跨域性
  • 相关阅读:
    Aseprite+Cocos:打包像素画图,导入到cocos里并动起来
    自定义博客园个人皮肤
    埃航和737MAX坠毁:软件优先级问题
    淘宝网——软件质量属性场景分析
    王概凯《架构漫谈》阅读笔记
    2965 -- The Pilots Brothers' refrigerator
    UVa10082 -- WERTYU
    1753 -- Flip Game
    1083 -- Moving Tables
    2159 -- Ancient Cipher
  • 原文地址:https://www.cnblogs.com/wzndkj/p/10042120.html
Copyright © 2011-2022 走看看