什么是跨域

因为浏览器的同源安全策略,当两个域具有相同的协议(如http), 相同的端口(如80),相同的host(如www.google.com),那么我们就可以认为它们是相同的域(协议,域名,端口都必须相同)

跨域就指着协议,域名,端口不一致,出于安全考虑,跨域的资源之间是无法交互的

什么是Access-Control-Allow-Origin

Access-Control-Allow-Origin是HTML5中定义的一种解决资源跨域的策略

他是通过服务器端返回带有Access-Control-Allow-Origin标识的Response header,用来解决资源的跨域权限问题

使用方法:在response的header中添加 Access-Control-Allow-Origin,例如

Access-Control-Allow-Origin:www.google.com

www.google.com 是访问的域名,那么www.google.com即可访问资源

也可以设置为 * 表示该资源谁都可以用

Access-Control-Allow-Origin: *

如何使用nodejs中间件来解决跨域

因为同源安全策略仅存于浏览器中,所以当我们摆脱浏览器,使用其他的方式请求资源,就不会受到跨域的影响

使用nodejs中间件来解决跨域,实际上就是使用nodejs来请求跨域的资源。然后将资源进行包装,加入Access-Control-Allow-Origin头属性来允许跨域,然后返回给客户端

下面即为一个简单的例子

const http = require("http")
const https = require("https")

// 创建http服务器
let server = http.createServer((req,res) => {

    //设置允许所有资源跨域的头属性
    res.setHeader("Access-Control-Allow-Origin", "*")

    //缓存收到的数据
    let cache = ''
    
    // 创建request
    let getdata = https.request(
        //笔者找的免费api接口
        'https://www.apiopen.top/femaleNameApi?page=1',
        //监听data内容,将内容返回给客户端
        data => {
            data.on('data', r => cache += r.toString())
            data.on('end', r => res.end(cache))
        }
    )

    // request错误处理
    getdata.on('error',r => console.log(r))
    
    // 发送request
    getdata.end()
        
})

// 启动http服务器
server.listen(8080,() => console.log('服务器开启8080端口监听'))
Last modification:October 28th, 2019 at 02:45 pm
If you think my article is useful to you, please feel free to appreciate