美文网首页
CORS同源政策——JSONP跨域处理

CORS同源政策——JSONP跨域处理

作者: 林立镇 | 来源:发表于2017-08-15 00:32 被阅读0次

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">
        window['llzUser'] = {}
        var script = document.createElement('script')
        script.src = 'http://llz.com/xxx.js?name=llzUser'
        //script下载的数据
        //  window['llzUser'] = ({
        //      "name":"llz",
        //      "age" : 23
        //  })
        //将替换window['llzUser']的值
        
        script.onload = function(){
            console.log('加载xxx.js 成功');
            console.log(window['llzUser'])
        }
        document.head.appendChild(script)
    </script>
</body>
</html>

xxx.js

//window['llzUser']
window['{{name}}'] = ({
    "name":"llz",
    "age" : 23
})

server.js

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

//console.log(Object.keys(http))
var port = process.env.PORT || 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 === '/xxx.js'){ 
    var name = query.name//llzUser
    var string = fs.readFileSync('./xxx.js','utf8') 
    response.setHeader('Access-Control-Allow-Origin','http://llj.com') 
    response.setHeader('Content-Type', 'text/javascript;charset=utf-8')
    response.end(string.replace('{{name}}',name))   
  }}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

在浏览器URL输入llj.com/llj网址,
网页向http://llz.com/xxx.js?name=llzUser请求脚本并发送请求参数,
server.js会获取请求参数name的值,然后替换xxx.js里的{{name}}字符串,
然后将替换后的内容返回给客户端,
会将页面javascript·里的window['llzUser']变量的值替换。
这里面既有跨域,又有回调函数。
回调函数的话,一般发送的参数名为callback=函数名

相关文章

  • AJAX入门

    处理跨域的主要方法 JSONP CORS本文主要讨论CORS解决AJAX因为浏览器同源策略不能跨域请求数据的问题。...

  • CORS同源政策——JSONP跨域处理

    llz.html llj.html xxx.js server.js 在命令行运行(需要下载Node.js) 在浏...

  • 跨域

    主要内容: 同源策略、跨域实现形式(JSONP、CORS、降域、postMessage) 同源策略 (Same o...

  • 同源策略与跨域

    跨域就是违背了同源策略解决跨域的方法有:jsonp,cors和服务器代理

  • AJAX和JSONP请求

    同源策略:端口 域名 协议相同 跨域解决CORS代理请求方式jsonp JSONP流程:动态创建script标签,...

  • Web28.JSONP & 跨域

    跨域 1.JSONP2.CORS3.降域4.PostMessage 同源策略(Same origin Policy...

  • 跨域请求解决办法

    CORS:即跨域资源共享,它允许浏览器向跨域服务器发送ajax请求 与JSONP的区别:jsonp是绕过了同源限制...

  • 什么是跨域?跨域有几种实现形式:

    跨域指的是跨过同源策略,实现不同域之间进行数据交互的过程叫跨域。跨域的实现形式主要有JSONP方法、CORS方法、...

  • 跨域

    跨域指的是跨过同源策略,实现不同域之间进行数据交互的过程叫跨域。跨域的实现形式主要有JSONP方法、CORS方法、...

  • 跨域之二:JSONP 和 CORS

    本节内容:实现跨域常用的两种方式 —— JSONP 和 CORS 零:跨域报错展示 在非同源情况下,调用 Ajax...

网友评论

      本文标题:CORS同源政策——JSONP跨域处理

      本文链接:https://www.haomeiwen.com/subject/kdnprxtx.html