Jsonp解决同源限制问题(步骤)

笔记

• 针对res.render('index.html')，总是打印不出来网页。解决方案：

1. 在app.js路由里面下载 express-art-template art-template模板引擎(下载express-art-template必须要使用art-template)
2. 然后在配置一下代码:
app.engine('html', require('express-art-template')) 
app.set('views', 'public') // 改变默认的views文件夹路径
3. 然后就可以打印了

• jsonp解决同源限制问题

1. 将不同源服务器请求地址写在请求地址的script标签上的src属性上.
2. 服务器端响应数据必须是一个函数调用.
3. 客户端全局作用域下定义函数fn
4. 在fn函数内部对服务端返数据进行处理。

• 来看案例代码
  s1服务器里的app.js代码

var express = require('express')
var path = require('path')
    // var router = require('./router')
var app = express()
app.use(express.static(path.join(__dirname, 'public')))
app.engine('html', require('express-art-template'))
app.set('views', 'public')
// app.use(router)
app.listen(3000, function() {
    console.log('服务器启动了端口:3000')
})

s1服务器里的public里面的text.html代码(简化了)

    <script>
        // 3.在客户端定义函数fn
        function fn(data) {
            console.log('客户端接收了')
            // 4.对服务器端返回数据进行处理
            console.log(data)
        }
    </script>
    <script src="/js/ajax.js"></script>
    <!-- 1.写不同源到script标签里面 -->
    <script src="http://localhost:3001/s2"></script>

• s2服务器代码

var express = require('express')
var path = require('path')
var app = express()
app.use(express.static(path.join(__dirname, 'public')))
app.get('/s2', function(req, res) {
    // 2.服务器发送函数调用
    const data = 'fn({name: "张三", age: "20"})'
    res.send(data)
})
app.listen(3001, function() {
    console.log('s2服务器启动了')
})