CORS同源政策——服务器对于跨域的处理

2017-08-14 本文已影响0人林立镇

如何伪装一个网站（在本地）

编辑 hosts 文件
mac: sudo vi /etc/hosts
windows: http://jingyan.baidu.com/article/b907e627d86be046e6891c41.html8
添加一行 127.0.0.1 xxx.com
保存关闭
访问 xxx.com:端口号

同源的意思

协议、域名、端口号必须相同，
路径、文件、参数可以不同

CORS同源政策

约定

简单模式（GET、POST）
目标服务器在响应头里添加 Access-Control-Allow-Origin: http://xxx.com3 即可
复杂模式（除了 GET、POST）
Access-Control-Allow-Origin: http://frank.comAccess-Control-Allow-Methods: POST, GET, OPTIONS, PATCH, DELETE, HEAD
会发两次请求，第一次是 OPTIONS 请求，询问目标服务器是否允许 PUT/PATCH如果允许，则发真正的请求。

github跨域的实例
先编辑host文件
加入两行代码

127.0.0.1 llz.com
127.0.0.1 llj.com

则本地服务器的域名又多了两个，分别是
llz.com
llj.com

llz.html

<h2>llz的网站</h2>

llj.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h2>llj的网站</h2>
    <script type="text/javascript">
        let xhr = new XMLHttpRequest()
        xhr.open('GET','http://llz.com/llz_private')
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4){
                console.log(xhr.responseText)
            }
        }
        xhr.send()
    </script>
</body>
</html>

llz_private.json

{
    "name":"llz",
    "age" : 22
}

server.js

var http = require('http')
var fs = require('fs')
var url = require('url')

var port = process.env.PORT || 80;
//修改端口为80
var server = http.createServer(function(request, response){

  var temp = url.parse(request.url, true)
  var path = temp.pathname
  var query = temp.query
  var method = request.method

  if(path === '/'){  // 如果用户请求的是 / 路径
    var string = fs.readFileSync('./llz.html', 'utf8')  
    response.setHeader('Content-Type', 'text/html;charset=utf-8')  
    response.end(string)   
  }else if(path === '/llz'){ 
    var string = fs.readFileSync('./llz.html', 'utf8')  
    response.setHeader('Content-Type', 'text/html;charset=utf-8')  
    response.end(string)   
  }else  if(path === '/llj'){  
    var string = fs.readFileSync('./llj.html', 'utf8')  
    response.setHeader('Content-Type', 'text/html;charset=utf-8')  
    response.end(string)   
  }else  if(path === '/llz_private'){  
    var string = fs.readFileSync('./llz_private.json')  
    response.setHeader('Access-Control-Allow-Origin','http://llj.com')
    //在http://llj.com/llj的网址里向和它不同的域名http://llz.com/llz_private发出请求，
    //属于跨域，要在服务端添加上面一行代码
    response.setHeader('Access-Control-Allow-Methods','POST, GET, OPTIONS, PATCH, DELETE, HEAD')
    //当发出GET、POST之外方式的请求时，（一般是第二次请求，第一次是GET请求）
    //要在服务器上添加上面一行代码
    response.setHeader('Content-Type', 'application.json')  
    response.end(string)   
  }else  if(path === '/style.css'){   
    var string = fs.readFileSync('./style.css', 'utf8')
    response.setHeader('Content-Type', 'text/css')
    response.end(string)
  }else if(path === '/main.js'){  
    var string = fs.readFileSync('./main.js', 'utf8')
    response.setHeader('Content-Type', 'application/javascript')
    response.end(string)
  }else{  
    response.statusCode = 404
    response.setHeader('Content-Type', 'text/html;charset=utf-8') 
    response.end('找不到对应的路径，你需要自行修改 index.js')
  }

  console.log(method + ' ' + request.url)
})

server.listen(port)
console.log('监听 ' + port + ' 成功，请用在空中转体720度然后用电饭煲打开 http://llz.com:' + port)

在命令行运行（需安装Node.js）

node server.js

可以在浏览器打开
llz.com或llj.com
都可以打开llz.html网页
路径为/llz
还是打开这个网页
路径为llj
则打开llj.html网页，
当使用http://llj.com域名打开llj.html网页时，
即URL为http://llj.com/llj.html
就会向URL为llz.com/llz_private.json发送一个请求，
服务器返回这个文件，
这就是跨域。
因为是域名为llj.com里的文件向域名为llz.com里的文件发出请求，
两者不同源。