Nginx解决前端跨域

香菊网 发表于: 2019-04-08 分类: 服务器serve  js部分  H5部分  front  nginx  

跨域是前端开发中经常会遇到的问题,前端调用后台服务时,通常会遇到 No 'Access-Control-Allow-Origin' header is present on the requested resource的错误,这是因为浏览器的同源策略拒绝了我们的请求。
      所谓同源是指,域名,协议,端口相同,浏览器执行一个脚本时同源的脚本才会被执行。如果非同源,那么在请求数据时,浏览器会在控制台中报一个异常,提示拒绝访问。
      这个问题我们通常会使用CORS(跨源资源共享)或者JSONP去解决,这两种方法也是使用较多的方法,网上的文章对于这两种的介绍都很详细了。但对于使用Nginx解决跨域大多写的不太详细,这里主要想介绍一下Nginx解决跨域问题的方法。

      Nginx是一个高性能的HTTP反向代理服务器,由俄罗斯的伊戈尔·赛索耶夫开发,其特点是占有内存少,并发能力强。Nginx可以在这里下载到,解压后双击nginx.exe即可运行。


负载均衡

提到Nginx这里就想多讲一下它的负载均衡,Nginx可以将请求转发均匀转发至多台服务器上,通过部署多台相同服务的服务器,可以减轻服务器的压力。

首先我们需要使用nodeJs开启两个服务,代码相同,返回结果不同

const server = require('express')()
// 所有的get请求
server.get('*', (req, res) => {
    res.end(`
      <!DOCTYPE html>
      <html lang="en">
        <head><title>Hello</title></head>
        <body>
          <h1>这里是8080端口</h1>
        </body>
      </html>
    `)
})

server.listen(8080, function () {
  console.log('server start')
})

接下来对nginx/conf下的nginx.conf文件做如下修改:

#进程数可根据cpu数量调整
worker_processes  1;

events {
    #连接数
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;

    # 连接超时时间,服务器会在这个时间过后关闭连接。
    keepalive_timeout  10;

    # gizp压缩
    gzip  on;

    # srever模块配置是http模块中的一个子模块,用来定义一个虚拟访问主机
    server {
        listen       80; # 监听80端口
        server_name  localhost;
        
        # 根路径指到index.html
        location / {
            root   html;
            index  index.html index.htm;
        }

        # /a会被分发到myserver
        location /a {
            proxy_pass http://myserver; # 负载均衡名
            proxy_set_header X-real-ip $remote_addr;
            proxy_set_header Host $http_host;
        }

        # 重定向错误页面到/50x.html
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

    }
    #负载均衡
    upstream myserver {
        server 192.168.0.103:8080 weight=1 max_fails=2 fail_timeout=20s;
        server 192.168.0.103:8081 weight=1 max_fails=2 fail_timeout=20s;
        # ip_hash;
    }
}

nginx -s reload 重新载入nginx配置, 访问 http://localhost/a 就可以看到结果

# srever模块, 监听localhost的80端口
server {
    listen       80; # 监听80端口
    server_name  localhost;

    # localhost/a 的请求会被均匀分发到myserver
    location /a {
        # 负载均衡名(用于进行负载均衡的配置)
        proxy_pass http://myserver;
        # 设置用户真实ip否则获取到的都是nginx服务器的ip
        proxy_set_header X-real-ip $remote_addr;
        proxy_set_header Host $http_host;
    }
}

 

# 这里是对负载均衡的配置
upstream imgserver {
    server 192.168.0.103:8080 weight=1 max_fails=2 fail_timeout=20s;
    server 192.168.0.103:8081 weight=1 max_fails=2 fail_timeout=20s;
    # ip_hash;
    # ip_hash将某个ip的访问都定向到同一台服务器上,可以解决session问题
    # 但ip_hash是有弊端的(具体百度)
    # 为了解决ip_hash的一些问题,可以使用upstream_hash这个第三方模块
}

server后是两个服务的地址,以及参数设置, weight(权重), max_fails(最大失败次数), fail_timeout(请求失败暂停时间后重新请求).

回归正题, 修改nginx.conf文件如下:

#进程, 可更具cpu数量调整
worker_processes  1;

events {
    #连接数
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;

    #连接超时时间,服务器会在这个时间过后关闭连接。
    keepalive_timeout  10;

    # gizp压缩
    gzip  on;

    # 直接请求nginx也是会报跨域错误的这里设置允许跨域
    # 如果代理地址已经允许跨域则不需要这些, 否则报错(虽然这样nginx跨域就没意义了)
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Headers X-Requested-With;
    add_header Access-Control-Allow-Methods GET,POST,OPTIONS;

    # srever模块配置是http模块中的一个子模块,用来定义一个虚拟访问主机
    server {
        listen       80;
        server_name  localhost;
        
        # 根路径指到index.html
        location / {
            root   html;
            index  index.html index.htm;
        }

        # localhost/api 的请求会被转发到192.168.0.103:8080
        location /api {
            rewrite ^/b/(.*)$ /$1 break; # 去除本地接口/api前缀, 否则会出现404
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://192.168.0.103:8080; # 转发地址
        }
        
        # 重定向错误页面到/50x.html
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

    }

}

nginx -s reload 重新载入nginx配置.

接下来配置本地服务器并启动

const server = require('express')()
var bodyParser = require('body-parser')
server.use(bodyParser())

server.post('/a', (req, res) => {
  console.log(req.body)
  let a = {
    'json': 1
  }
  res.json(a)
})
server.listen(8080, function () {
  console.log('server start')
})

前端代码

    $.ajax({
        url: "http://localhost/api/a",
        type : "post",
        data: { 
            CITY: '深圳'
        },
        success : function(data) {
            alert( "Data: " + JSON.stringify(data) );
        }
    });

可以看到正确弹出了'Data: {json: 1}', 后台也成功输出了{CITY: 深圳}.

对于线上请求只需要将proxy_pass http://192.168.0.103:8080; 改为
proxy_pass http://目标地址; 即可.

 

 

标签: 服务器servejs部分H5部分frontnginx
Copyright © 2019 幻雨焉缘博客 | 浙ICP备19001843号-1
----------------------------------
种一棵树,最好的培养时间是十年前,其次是现在 加油  (ง •_•)ง。        ──── 前端攻城狮