# 四.middleware

原理大致与 nginx 相同，都是通过启动一个代理服务器，实现数据的转发，也可以通过设置 cookieDomainRewrite 参数修改响应头中 cookie 中域名，实现当前域的 cookie 写入，方便接口登录认证。

# 1.非 vue 框架的跨域（2 次跨域）

利用 node + express + http-proxy-middleware 搭建一个 proxy 服务器

刷新

全屏/自适应

2.启动 proxy-middleware

npm i express http-proxy-middleware -D

const express = require("express")
const app = express()
const proxyMiddleWare = require("http-proxy-middleware")

app.use(
  proxyMiddleWare("/*", {
    target: "http://localhost:3000",
    changeOrigin: true,
  })
)

app.listen(3000, () => {
  console.log("监听3000端口")
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14

3.后台服务

const http = require("http")
const querystring = require("querystring")

const app = http.createServer()

app.on("request", (req, res) => {
  if (req.method == "GET") {
    res.writeHead(200, { "Content-Type": "text/html" })
    res.write("success get")
    res.end()
  }
  if (req.method === "POST") {
    let data = ""
    console.log(req.headers)
    req.on("data", (chunk) => {
      data += chunk
    })

    req.on("end", () => {
      data = querystring.parse(data)
      res.write(querystring.stringify(data))
      res.end("123")
    })
  }
})

app.listen(3000, () => {
  console.log("已经连接上了3000")
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

# 2.vue 框架的跨域（1 次跨域）

利用 node+ webpack+webpack-dev-server 代理接口跨域。在开发环境下，由于 vue 渲染服务和接口代理服务都是 webpack-dev-server 同一个，所以页面与代理接口之间不再跨域，无需设置 headers 跨域信息。

← 三.nginx 五.jsonp →