0518node服务器以及跨域

0518node服务器以及跨域

1、node静态服务器

const { join, extname } = require('path')
const fs = require('fs')
const http = require('http')// 定义一个mime类型对象
const mimes = {'.js': 'application/javascript','.jpg': 'image/jpeg','.css': 'text/css','.html': 'text/html;charset=utf-8'
}// 网站根目录  url地址中的 / => www目录
const webRoot = join(__dirname, 'www')
// req 是对象也是流 res是对象也是流
ateServer((req, res) => {if (req.url != '/favicon.ico') {// 得到客户请求的pathname，并且做了缺省页的处理let pathname = req.url === '/' ? '/index.html' : req.url// 得到请求的对象服务器中真实的文件路径let filepath = join(webRoot, pathname)// 判断文件是否存在，如果不存在则返回404if (fs.existsSync(filepath)) { // 文件存在// 得到请求文件的扩展名const ext = extname(filepath)// 得到扩展名const mime = mimes[ext]// 设置响应头res.setHeader('content-type', mime)// 读取文件并给响应adFileSync(filepath))} else {res.statusCode = d('not found')}}}).listen(3000, '0.0.0.0')

2、动态服务

2.1、get获取数据

const http = require('http');
const url = require('url');
ateServer((req, res) => {// 获取地址栏中 query数据let { query } = url.parse(req.url, true);console.log(query);
}).listen(8080)

2.2、post获取数据

const http = require('http');
const queryString = require('querystring');
ateServer((req, res) => {let data = '';// 数据接受中('data', res => {data += res});// 数据传输结束了  接受到的所有数据('end', () => {// post数据let post = queryString.parse(data)console.log(post);});}).listen(8080)let postData = []
// 有数据流入
('data', buffer => postData.push(buffer))
// 接受完毕
('end', () => {console.log(qs.at(postData).toString()));d('ok')
})

2.3、文件上传

const { join, extname } = require('path')
const fs = require('fs')
const http = require('http')
const { createGzip } = require('zlib')
const url = require('url')
const qs = require('querystring')
const mimes = require('./libs/mime')// 网站根目录  url地址中的 / => www目录
const webRoot = join(__dirname, 'www')// get数据获取
ateServer((req, res) => {let { pathname, query } = url.parse(req.url, true)// post处理if (hod === 'POST') {// 路由 post登录处理  流if (pathname == '/upload') {// 文件名称let filename = w() + extname(req.headers.filename);// 实现文件上传req.ateWriteStream(join(webRoot, 'uploads', filename)))d(JSON.stringify({ code: 0, url: 'localhost:3000/uploads/' + filename }))}} else {if (req.url != '/favicon.ico') {// query，就是浏览器访问的get参数集合pathname = pathname === '/' ? '/index.html' : pathname// 得到请求的对象服务器中真实的文件路径let filepath = join(webRoot, pathname)if (fs.existsSync(filepath)) {// 得到请求文件的扩展名const ext = extname(filepath).slice(1)// 得到扩展名const mime = mimes[ext]// 设置响应头res.setHeader('content-type', mime)// res.setHeader('Content-Encoding', 'gzip')let html;if ('html' === ext) {html = fs.readFileSync(filepath, 'utf-8');// html = place('{{id}}', query.id)html = place(/{{s*(w+)s*}}/g, (preg, match) => {return query[match]})} else {html = fs.readFileSync(filepath)}d(html)// fs.createReadStream(filepath).pipe(createGzip()).pipe(res)} else {res.statusCode = d('not found')}}}
}).listen(3000, '0.0.0.0')

3、node路由

const { join, extname } = require('path')
const fs = require('fs')
const http = require('http')
const { createGzip } = require('zlib')
const url = require('url')
const qs = require('querystring')
const mimes = require('./libs/mime')
const router = require('./events/route')
// 订阅请求pathname事件
require('./router/login')// 网站根目录  url地址中的 / => www目录
const webRoot = join(__dirname, 'www')ateServer((req, res) => {let { pathname, query } = url.parse(req.url, true)pathname = pathname === '/' ? '/index.html' : pathnameif (req.url != '/favicon.ico') {if (!extname(pathname)) {// 接口类型,使用事件定完成路由it(pathname, req, res)} else {// 得到请求的对象服务器中真实的文件路径let filepath = join(webRoot, pathname)if (fs.existsSync(filepath)) {// 得到请求文件的扩展名const ext = extname(filepath).slice(1)// 得到扩展名const mime = mimes[ext]// 设置响应头res.setHeader('content-type', mime)let html;if ('html' === ext) {html = fs.readFileSync(filepath, 'utf-8');html = place(/{{s*(w+)s*}}/g, (preg, match) => {return query[match]})} else {html = fs.readFileSync(filepath)}d(html)} else {res.statusCode = d('not found')}}}
}).listen(3000, '0.0.0.0')

4、跨域问题

同源策略
跨域问题的出现是由于浏览器保护的安全策略，用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。
跨域的访问会带来许多安全性的问题，比如，cookie一般用于状态控制，常用于存储登录的信息，如果允许跨域访问，那么别的网站只需要一段脚本就可以获取你的cookie，从而冒充你的身份去登录网站，造成非常大的安全问题，因此，现代浏览器均推行同源策略。

4.1、jsonp解决跨域问题

<script>
function 函数(){}
</script>
<script src=’:3000/?cb=函数名’></script>

4.2、cors解决跨域

 // 通过设置响应头信息，来允许ajax跨域请求// * 表示允许所有域名来跨域请求 // * 如果你所写为 * 则cookie将无法跨域if (allowDomain.includes(igin)) {// res.setHeader('Access-Control-Allow-Origin', 'localhost:4000')res.setHeader('Access-Control-Allow-Origin', igin)res.setHeader('Access-Control-Allow-Credentials', 'true')res.setHeader('Access-Control-Allow-Methods', 'GET,POST,PUT,PATCH,DELETE,OPTIONS')res.setHeader('Access-Control-Allow-Headers', 'username')res.setHeader('Access-Control-Expose-Headers', 'uuuu')}res.setHeader('content-type', 'application/json;charset=utf-8')res.setHeader('uuuu', 'admin888')d(jsonFn(user))//=================================================
//前端页面的请求
const xhr = new XMLHttpRequest()
kie = 'name=abc;path=/'
xhr.open('put', 'localhost:3000/', true)
xhr.withCredentials = true;
xhr.setRequestHeader('username', 'aaa')
xhr.send()
adystatechange = () => {if (adyState === 4 && xhr.status === 200) {console.ResponseHeader('uuuu'))console.sponseText)}
}

4.3、postMessage

// a.html  3000
<iframe src="localhost:4000/" frameborder="0" id="frame" onload="load()"></iframe>
<script>function load() {let frame = ElementById('frame')tWindow.postMessage('aaa', 'localhost:4000')}ssage = function (e) {console.log(e.data)}</script>//========================================================
// b.html  4000
<script&ssage = function (e) {console.log(e.data)e.source.postMessage('bbb', e.origin)}
</script>