Nginx实现跨域

Nginx下载

  1. 概念
    1. 高性能web服务器
    2. 一般用作静态服务器, 负载均衡
    3. 反向代理(跨域)


    nginx.png
  2. 下载

    1. win下载: 官网下载http://nginx.org/en/download.html
    2. mac下载: brew install nginx
  3. 配置文件

    1. win: C:\nginx\conf\nginx.conf
    2. mac: /usr/local/etc/nginx/nginx.conf
  4. Nginx命令

    1. 检测配置文件格式是否正确: nginx -t
    2. 启动nginx, 重启nginx: nginx -s reload
    3. 停止: nginx -s stop
    4. Mac 打开配置文件: sudo vi /usr/local/etc/nginx/nginx.conf(也可直接编辑)

Nginx实现跨域

第一步 node服务端

    const http = require('http')
    const url = require('url')
    const server = http.createServer((req, res) => {
      const { method } = req
      const { pathname } = url.parse(req.url)
      res.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' })
      if (pathname === '/list' && method === 'GET') {
        const data = JSON.stringify({ username: 'test', pwd: 123 })
        console.log(pathname);
        res.end(data)
      } else {
        res.writeHead(404, { 'Content-Type': 'text/plain; charset=utf-8' })
        res.end('404 not found')
      }
    })
    server.listen(3000, () => {
      console.log('listen port at 3000')
    })

第二步 web客户端

    
    
      测试页面
      
      
    

第三步 配置nginx

    # 设定http服务器, 之后请求都是http不是https
    http { 
        server {
            listen 3002;  # 侦听3002端口
            server_name  localhost;    # 客户端域名
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Credentials' 'true'; 
            add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';
            # 静态资源的地址, 可不配置也能实现跨域
            # location / {
            #     root   C:/Users/80021648/Desktop/js;  #定义服务器的默认网站根目录位置
            #     index  index.html index.htm app.html;  #定义首页索引文件的名称
            # }
            location /list{
                proxy_pass http://localhost:3000/list; # 代理转发的服务端地址
            }
        }
    }

总结

    服务端: http://localhost:3000
    客户端: http://localhost:3001
    nginx: http://localhost:3002
    
    客户端请求nginx监听的端口,  nginx监听到端口请求, 然后代理转发的服务端地址
    
    客户端 -> 服务端
    axios.get('http://localhost:3000/list')
    变成 客户端 -> nginx代理转发 -> 服务端
    axios.get('http://localhost:3002/list')

你可能感兴趣的:(Nginx实现跨域)