# 三.nginx

1.nginx 配置解决 iconfont 跨域

浏览器跨域访问 js、css、img 等常规静态资源被同源策略许可

但 iconfont 字体文件（eot|otf|ttf|woff|svg）例外，此时可在 nginx 的静态资源服务器中加入以下配置

location / {
    add_header Access-Control-Allow-Origin *;
}

1
2
3

2.nginx 反向代理接口跨域
- 跨域原理：同源策略是浏览器的安全策略，不是 HTTP 协议的一部分。服务器端调用 HTTP 接口知识使用 HTTP 协议，不会执行 JS 脚本，不需要同源策略，不会存在跨域的问题。
前端页面

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>a.html</title>
  </head>
  <script>
    let xhr = new XMLHttpRequest()
    xhr.open("get", "localhost:4000/apis", true)
    /* 2.前端发头 会发两次请求把条件判断 === “post”去掉*/
    xhr.setRequestHeader("name", "znc")
    xhr.send(null)
    xhr.onreadystatechange = () => {
      if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.response)
        debugger
      }
    }
  </script>

  <body></body>
</html>

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

后台服务

const http = require("http")
const querystring = require("querystring")
const app = http.createServer()
app.on("request", (req, res) => {
  console.log(req.method)
  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()
    })
  } else {
    res.write(
      querystring.stringify({
        name: "zzb",
      })
    )
    res.end()
  }
})
app.listen(4000, () => {
  console.log("已经连接上了4000")
})

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

配置 nginx 跨域请求

location / {
    proxy_pass   localhost:4000;  #反向代理
    proxy_cookie_domain localhost:4000 localhost:3000; #修改cookie里域名
    index  index.html index.htm;

    # 当用webpack-dev-server等中间件代理接口访问nignx时，此时无浏览器参与，故没有同源限制，下面的跨域配置可不启用
    add_header Access-Control-Allow-Origin localhost:4000;  #当前端只跨域不带cookie时，可为*
    add_header Access-Control-Allow-Credentials true;
}

1
2
3
4
5
6
7
8
9

← 二.cors 四.middleware →